18 Bootstrap Headers
Published: 2024-02-01 06:29:45

<div class="post-content"><p class="intro">Collection of free <strong>Bootstrap header</strong> code examples.</p>
<h4 class="list-header">Related Articles</h4>
<ol>
  <li><a href="/bootstrap-footers/" title="Collection of hand-picked free custom Bootstrap footer code examples">Bootstrap Footers</a></li>
  <li><a href="/css-headers-footers/" title="Collection of hand-picked free HTML and CSS header and footer code examples">CSS Headers and Footers</a></li>
</ol>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-4-header-with-navbar.jpg" alt="Demo image: Bootstrap 4 Header with Navbar" title="Bootstrap 4 Header with Navbar">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>BBBootstrap Team</li>
        <li><time>September, 2020</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bbbootstrap.com/snippets/bootstrap-header-navbar-23316626" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 Header with Navbar</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>-</p>
  <p><span class="accent">Bootstrap version: </span>4.4.1</p>
</article>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2687268505112777" crossorigin="anonymous"></script>
<p><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-5h+bc-5i+5t+tt" data-ad-client="ca-pub-2687268505112777" data-ad-slot="1953526485"></ins></p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-4-header-with-background-images-and-navbar.jpg" alt="Demo image: Bootstrap 4 Header with Background Images and Navbar" title="Bootstrap 4 Header with Background Images and Navbar">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>BBBootstrap Team</li>
        <li><time>June, 2020</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bbbootstrap.com/snippets/bootstrap-header-background-images-and-navbar-18342507" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 Header</h3>
  <p>Bootstrap 4 header with background images and navbar.</p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>font-awesome.css</p>
  <p><span class="accent">Bootstrap version: </span>4.4.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-4-e-commerce-menu-header-using-html-css.png" alt="Demo image: Bootstrap 4 E-Commerce Menu Header Using HTML CSS" title="Bootstrap 4 E-Commerce Menu Header Using HTML CSS">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>BBBootstrap Team</li>
        <li><time>November, 2019</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bbbootstrap.com/snippets/e-commerce-menu-header-using-html-css-21940848" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 E-Commerce Menu Header Using HTML/CSS</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>jquery.js, tweenmax.js</p>
  <p><span class="accent">Bootstrap version: </span>4.1.1</p>
</article>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2687268505112777" crossorigin="anonymous"></script>
<p><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-5g+c3-2g-5y+11j" data-ad-client="ca-pub-2687268505112777" data-ad-slot="9922581654"></ins></p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-static-header.jpg" alt="Demo image: Bootstrap Static Header" title="Bootstrap Static Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Ondrej</li>
        <li><time>October 22, 2019</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bootstrapious.com/p/bootstrap-static-header" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Static Header</h3>
  <p>Using simple jumbotron-style component, create a nice Bootstrap 4 header with a background image.</p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>jquery.js</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-4-full-page-image-slider-header.jpg" alt="Demo image: Bootstrap 4 Full Page Image Slider Header" title="Bootstrap 4 Full Page Image Slider Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Start Bootstrap</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://startbootstrap.com/snippets/full-slider" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 Full Page Image Slider Header</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>-</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2687268505112777" crossorigin="anonymous"></script>
<p><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-5g+c3-2g-5y+11j" data-ad-client="ca-pub-2687268505112777" data-ad-slot="9922581654"></ins></p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-4-half-page-Image-slider-header.jpg" alt="Demo image: Bootstrap 4 Half Page Image Slider Header" title="Bootstrap 4 Half Page Image Slider Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Start Bootstrap</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://startbootstrap.com/snippets/half-slider" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 Half Page Image Slider Header</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>-</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-4-full-page-image-header.jpg" alt="Demo image: Bootstrap 4 Full Page Image Header" title="Bootstrap 4 Full Page Image Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Start Bootstrap</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://startbootstrap.com/snippets/full-image-header" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 Full Page Image Header</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>-</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-header-with-html5-video-background.jpg" alt="Demo image: Bootstrap Header with HTML5 Video Background" title="Bootstrap Header with HTML5 Video Background">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Start Bootstrap</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://startbootstrap.com/snippets/video-header" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Header with HTML5 Video Background</h3>
  <p>HTML5 video background header with mobile fallback.</p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>-</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/header-like-start-bootstrap.png" alt="Demo image: Bootstrap Header Like StartBootstrap" title="Bootstrap Header Like StartBootstrap">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Dey Dey</li>
        <li><time>July 13, 2019</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://www.bootdey.com/snippets/view/bs4-header-like-startbootstrap" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Header Like StartBootstrap</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>font-awesome.css</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-header-with-particles-js.png" alt="Demo image: Bootstrap 4 Header with Particles" title="Bootstrap 4 Header with Particles">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Dey Dey</li>
        <li><time>May 20, 2019</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://www.bootdey.com/snippets/view/bs4-header-with-particles-js" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap 4 Header with Particles</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>particles.js</p>
  <p><span class="accent">Bootstrap version: </span>4.3.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-header-blue.jpg" alt="Demo image: Bootstrap Header Blue" title="Bootstrap Header Blue">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Epic Bootstrap</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://epicbootstrap.com/snippets/header-blue" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Header Blue</h3>
  <p>Landing page header featuring a responsive navbar, beautiful intro text, and a phone mockup for showcasing your products.</p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>font-awesome.css</p>
  <p><span class="accent">Bootstrap version: </span>4.1.3</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-header-dark.jpg" alt="Demo image: Bootstrap Header Dark" title="Bootstrap Header Dark">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Epic Bootstrap</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://epicbootstrap.com/snippets/header-dark" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Header Dark</h3>
  <p>Landing page header with a large background image, responsive navbar, and a center spot for your project.</p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>font-awesome.css</p>
  <p><span class="accent">Bootstrap version: </span>4.1.3</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-page-header.jpg" alt="Demo image: Bootstrap Page Header" title="Bootstrap Page Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Anita26</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bootsnipp.com/snippets/Q0kG1" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Page Header</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>-</p>
  <p><span class="accent">Bootstrap version: </span>4.0.0</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/header-color-for-bootstrap-4.png" alt="Demo image: Header Color for Bootstrap 4" title="Header Color for Bootstrap 4">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Juan86</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bootsnipp.com/snippets/Q04ZX" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Header Color for Bootstrap 4</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>font-awesome.css</p>
  <p><span class="accent">Bootstrap version: </span>4.0.0</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-sticky-navbar-with-hero-header.jpg" alt="Demo image: Sticky Navbar with Hero Header" title="Sticky Navbar with Hero Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>shivangi08</li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://bootsnipp.com/snippets/E10d8" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Sticky Navbar with Hero Header</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>jquery.js</p>
  <p><span class="accent">Bootstrap version: </span>4.0.0</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-top-header-affix-nav-bottom-footer.png" alt="Demo image: Bootstrap Top Header, Affix Nav, Bottom Footer" title="Bootstrap Top Header, Affix Nav, Bottom Footer">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>ashleycam3ron</li>
        <li><time>October 27, 2017</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://www.codeply.com/p/nnMbHzFC2r" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Top Header, Affix Nav, Bottom Footer</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>jquery.js</p>
  <p><span class="accent">Bootstrap version: </span>3.4.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-template-fixed-sidebar-header.png" alt="Demo image: Bootstrap Template Fixed Sidebar and Header" title="Bootstrap Template Fixed Sidebar and Header">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Reeds</li>
        <li><time>March 31, 2015</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://www.codeply.com/p/dkwEov2TYB" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Template Fixed Sidebar and Header</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>jquery.js</p>
  <p><span class="accent">Bootstrap version: </span>3.4.1</p>
</article>
<article class="wrapper-2017">
  <figure>
    <img src="/assets/img/bootstrap-headers/bootstrap-header-with-carousel.jpg" alt="Demo image: Bootstrap Header with Carousel" title="Bootstrap Header with Carousel">
  </figure>
  <div class="info-box">
    <div class="info info-author">
      <h4>Author</h4>
      <ul>
        <li>Ronalds Vilcins</li>
        <li><time>January 12, 2015</time></li>
      </ul>
    </div>
  <div class="info info-link">
    <h4>Links</h4>
    <ul>
      <li><a href="https://codepen.io/ronaldsvilcins/pen/yygwRy" target="_blank">demo and code</a></li>
    </ul>
  </div>
  <div class="info info-frontend">
    <h4>Made with</h4>
    <ul>
      <li>HTML / CSS / JS</li>
    </ul>
    </div>
  </div>
  <h4 class="about-the-item">About a code</h4>
  <h3>Bootstrap Header with Carousel</h3>
  <p></p>
  <p><span class="accent">Compatible browsers: </span>Chrome, Edge, Firefox, Opera, Safari</p>
  <p><span class="accent">Responsive: </span>yes</p>
  <p><span class="accent">Dependencies: </span>jquery.js</p>
  <p><span class="accent">Bootstrap version: </span>3.3.1</p>
</article></div>