"Bootstrap Image Gallery "
Bootstrap 4.1.1 Snippet by jochemstoel

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <title>Izhar's Gallery</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet"> <style type="text/css"> .navbar-brand{font-family: 'Fredoka One', cursive;} </style> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-white"> <a href="" class="navbar-brand mx-auto">Izhar's Gallery</a> </nav> <hr> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/2045315/pexels-photo-2045315.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/2036650/pexels-photo-2036650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/132472/pexels-photo-132472.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/2059696/pexels-photo-2059696.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/1893536/pexels-photo-1893536.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/2041160/pexels-photo-2041160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/849835/pexels-photo-849835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/2060948/pexels-photo-2060948.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> <div class="card mb-5"> <img class="card-img-top" src="https://images.pexels.com/photos/933779/pexels-photo-933779.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img> <div class="card-body"> <h5 class="card-title">Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </p> </div> </div> </div> </div> </div> <div class="jumbotron d-flex justify-content-center mb-0"> <div class="list-group list-group-horizontal" style="font-size: 60px"> <a href="https://www.facebook.com/izhar.ulhaque3" class="list-group-item"> <i class="fab fa-facebook-square"></i> </a> <a href="" class="list-group-item"> <i class="fab fa-github-square"></i> </a> <a href="" class="list-group-item"> <i class="fab fa-instagram"></i> </a> <a href="https://www.youtube.com/channel/UCTR-2w3kYxK9tpiZ9g8iftg" class="list-group-item"> <i class="fab fa-youtube-square"></i> </a> </div> </div> <footer class="bg-dark text-center text-light" style="height: 90px"> <div class="container"> <p class="pt-4">CopyRight © </p> </div> </footer> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Related: See More

Datepicker
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
masonry Image Gallery

Questions / Comments: