"Bootstrap gallery"
Bootstrap 4.1.1 Snippet by Reason706

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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Bootstrap gallery</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.4.95/css/materialdesignicons.css"> <!-- Custom styles for this template --> <link href="css/gallery.css" rel="stylesheet"> </head> <body> <!-- Page Content --> <div class="container gallery"> <div class="row p-2"> <!--GALLERY OPTION START--> <div class="col-md-12 mt-3 mb-1 gallery-option"> <div class="option-left"> <a class="gallery-option-item" href="">ALL</a> <a class="gallery-option-item" href="">IMAGES</a> <a class="gallery-option-item" href="">AUDIO</a> <a class="gallery-option-item" href="">VIDEO</a> <a class="gallery-option-item" href="">DOCUMENTS</a> </div> <a class="gallery-option-item " href=""><i class="mdi mdi-magnify mr-2"></i></a> </div> <!--GALLERY OPTION END--> </div> <div class="row gallery-content"> <div class="col-md-2 p-0"> <h5 class="text-center m-2 ">Folders</h5> <hr class="w-100 my-1"> <div class="folder-tree "> <a class="folder-item" href=""><span class="mdi mdi-folder-image mr-1"></span>Technology</a> <a class="folder-item" href=""><span class="mdi mdi-folder-image mr-1"></span>Pollitician</a> <a class="folder-item" href=""><span class="mdi mdi-folder-image mr-1"></span>Travel</a> <a class="folder-item" href=""><span class="mdi mdi-folder-image mr-1"></span>Advertise</a> <button class="btn btn-outline-danger m-3 text-center">Create new</button> </div> </div> <!--ALL IMAGES SECTION START--> <div class="col-md-7 p-0 gallery-collection"> <div class="row "> <!--GALLERY OPTION START--> <div class="col-md-12 my-2 d-flex align-items-center "> <h4 class="mr-3">ALL MEDIAS</h4> <button class="btn btn-success mr-2">Add New</button> <button class="btn btn-success ">Add Via URL</button> </div> <!--GALLERY OPTION END--> <hr class="w-100 mb-2 mt-0 "> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/2gYsZUmockw/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EMSDtjVHdQ8/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/8mUEy0ABdNE/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/G9Rfc1qccH4/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aJeH0KcFkuc/400x300" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-6"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/p2TQ-3Bh3Oo/400x300" alt=""> </a> </div> </div> </div> <!--ALL IMAGES SECTION END--> <!--IMAGE DETAIL START--> <div class="col-md-3 gallery-detail"> <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/p2TQ-3Bh3Oo/400x300" alt=""> <h4 class="font-weight-light mt-1 mb-0">Item details</h4> <hr class="my-1 w-100"> <ul class="image-detail-list"> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Name:</span><span class="image-detail-value">Thistakescontentusingajsssasasjnak21545ax.jpg</span></li> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Type:</span><span class="image-detail-value">Image</span> </li> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Format:</span><span class="image-detail-value">JPEG</span> </li> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Size:</span><span class="image-detail-value">1.45 MB</span> </li> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Resolution:</span><span class="image-detail-value">1280*720</span></li> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Date:</span><span class="image-detail-value">7th-may-2020</span></li> <li class="image-detail-item"><span class="image-detail-info"><i class="mdi mdi-account icon-sm mr-1"></i>Link:</span><span class="image-detail-value">This takes content using ajax.jpg</span></li> </ul> </div> <!--IMAGE DETAIL START--> </div> <div class="row"> <div class="col-md-12 d-flex justify-content-end m-0 py-2 px-3"> <button class="btn btn-light m-1">Close</button> <button class="btn btn-primary m-1">Select</button> </div> </div> </div> <!-- /.container --> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> </body> </html>
body{ margin:30px; padding:20px; } .row , .container{ padding: 0px !important; margin: 0px !important; } .gallery{ box-shadow: 1px 1px 8px 2px #eee; } .gallery-content{ background-color: #fbfbfb ; border: 2px solid #F5F3F3; border-left: none; border-right: none; /*padding: 10px;*/ } .gallery-option{ display: inline-flex; /*flex-direction: column;*/ justify-content: space-between; padding:0px 10px; } .gallery-option-item{ color: #494949; font-size: 1rem; font-weight: 600; padding: 0 10px; margin: 0 2px; /* text-decoration: none;*/ border-bottom: 2px transparent solid; } .gallery-option-item:hover{ color: #03A9F4; text-decoration: none; border-bottom: 2px #2196F3 solid; } .gallery-collection{ padding:10px 10px; background:#fff } .gallery-detail{ display:flex; flex-direction: column; padding:10px 10px; } ul.image-detail-list { list-style: none; color: black; padding: 0; margin:0; } li.image-detail-item{ margin:10px 0px; font-size: 0.9rem; /* font-family: sans-serif; */ /* font-weight: 400; */ } li.image-detail-item{ color:#607d8b; } span.image-detail-info { width: 90px; word-break: break-word; display: inline-flex; margin-left: 10px; } span.image-detail-value { display: inline-flex; word-break: break-word; width: calc(100% - 100px); } .folder-tree { display: flex; flex-direction: column; font-size: 1rem; } a.folder-item { color: #565656; font-weight: 400; padding: 5px 5px; } a.folder-item:hover { color: #565656; background: #fff; text-decoration: none; } a.folder-item span.mdi{ color: #565656; font-size: 1.6rem; text-decoration: none; }

Related: See More

Paper Kit 2
arrow key navigation thumbnail gallery modal view
masonry Image Gallery
Portfolio Gallery with filtering category

Questions / Comments: