bootstrap Ex3

In this example below you will see how to do a bootstrap Ex3 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jamal-pb95, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jamal-pb95 ©
  • HTML
  • CSS
  • JavaScript
    <nav class="nav navbar-inverse navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture"></span> IMGS</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Sign up</a></li>
        <li><a href="">Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="jumbotron">
    <h1><i class="fa fa-camera-retro" aria-hidden="true"></i> The Image Gallery </h1>
    <p>A bunch of beautiful images that I didn't take(except for the first one!)</p>
  </div>

  <div class="row">
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/2d/1c/2d1c650d15c46d71405386b30009b3a0.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/f9/73/f97364cece4992d5f72ca6f25e21971e.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/e8/87/e8872df61b0e7d9304ae89fb647cb50c.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/32/43/3243c8ee76b24e95e3e406a8bd1f8493.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/2c/24/2c24dae55de90d393035a4c70330be27.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/5d/24/5d240c58a226e35ab14a64b2a7592b24.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/c2/d5/c2d56173b8f6178b0cf43b8d88e81db5.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/89/f8/89f843f161375f03105adc4e094e7335.jpg">
      </figure>
    </div>
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/76/ae/76aef16c40b4e4447233badc50b1845a.jpg">
      </figure>
    </div>
    
    <div class="col-lg-4 col-sm-6">
      <figure class="thumbnail">
        <img src="https://www.planwallpaper.com/static/cache/04/70/0470c1731a2332c3f6e05c06d365e872.jpg">
      </figure>
    </div>
  </div>
</div>

<footer class="container">
  <div class="row">
    <ul class="fa-2x">
      <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>
      <li><a href="#"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
      <li><a href="#"><i class="fa fa-github"></i></a></li>
      <li><a href="#"><i class="fa fa-codepen"></i></a></li>
      <li><a href="#"><i class="fa fa-free-code-camp"></i></a></li>
    </ul>
  </div>
</footer>

/*Downloaded from https://www.codeseek.co/jamal-pb95/bootstrap-ex3-OjxpvL */
    body { padding-top: 70px; }

.jumbotron {
  color: #2c3e50;
  background: #ecf0f1;
}

.navbar-inverse {
  background: #2c3e50;
  color: white;
}

.navbar-inverse .navbar-brand, .navbar-inverse a {
  color:white;
}

.navbar-inverse .navbar-nav>li>a {
  color: white;
}

footer.container {
  padding-top: 8px;
  background-color: #ECF0F1;
}

footer ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

footer ul li {
  margin-right: 10px;
}



/*Downloaded from https://www.codeseek.co/jamal-pb95/bootstrap-ex3-OjxpvL */
    

Comments