<!-- 
In this example we are making use of:
 === navbar
 === jumbotron
 === grid
 === custom CSS
 === icons
 === flexbox
 === Google Fonts
-->

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <div class="container">
  <a href="#" class="navbar-brand"><i class="fas fa-pen-nib"></i> Designs</a>
  
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="myNav">
    <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
    </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
<ul class="navbar-nav">
  <li class="nav-item mr-5"><a href="#" class="nav-link"><i class="fas fa-user"></i> Login</a></li>
  <li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-search"></i> Search</a></li>
</ul>

  </div><!-- navbar-collapse -->
 
  </div><!--  Container -->
  
</nav>

<div class="container">
  <div class="jumbotron">
    <h1>Image Gallery</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, reiciendis porro possimus doloribus nobis omnis!</p>
  </div>
  
  <div class="row">
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
     <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
     <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
    <div class="col-sm-6 col-md-4 mb-3">
      <img src="https://images.unsplash.com/photo-1423589989400-cc0270157ed0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a95937ce1dc3243f52c30f86d948b771" alt="" class="fluid img-thumbnail">      
    </div>
  </div>
</div>

<footer class="bg-dark">
  <div class="container">
    <div class="row">
      <div class="col d-flex justify-content-center align-items-center text-light">
        <h3>Footer</h3>
      </div>
    </div>
    
  </div>
  
</footer>