Grid-Image Bootstrapping

I am looking to design a responsive image grid similar to the one shown in the image below: https://i.sstatic.net/x4G88.png

How can I utilize bootstrap columns and rows to accomplish this task?

<div class="row">
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
........
...........
.................
.....................
</div>

I have attempted to place all the columns within a single row so that the column elements wrap themselves, but this is not occurring as expected. Upon implementing the code provided above, some images appear elongated due to "height: auto," resulting in white space gaps between images from different rows. As a result, the output looks something like the following:
https://i.sstatic.net/LHvVd.jpg

htmlcssbootstrap-4

Answer №1

To create a layout like this, you can use card columns. Take a look at the JSFiddle example here:

<div class="container-fluid pt-3">
<div class="card-columns">
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
</div>
</div>

Answer №2

Based on your specific needs, you may need to switch out col-3 with col-sm-3 or col-md-3, and so forth:

img
{
  width: 100%;
  margin: 10px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
   <img src="https://www.w3schools.com/w3images/falls2.jpg" alt="Lights" >
   <img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
  </div>
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="Lights" >
   <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
  </div>
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
   <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" >
   <img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
  </div>
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
   <img src="https://www.w3schools.com//w3images/rocks.jpg" alt="Lights" >
  </div>
</div>

Answer №3

It seems unlikely that this can be achieved solely with bootstrap. Consider exploring the masonry plugin ( ) or isotope plugin ( ) for compatibility with bootstrap.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

I am currently working on developing a table preview feature to display events. I previously sought assistance here regarding positioning elements within the table and successfully resolved that issue. Applying the same principles, I am now attempting to c ...

htmlcssangulartypescript

What is the best way to select just the innermost row of a nested table for emphasis?

I am working on a project with multiple nested tables and I am looking for a way to highlight the innermost row below the mouse pointer. How can I achieve this? Just to provide some context, I am using nested tables to present recursive tabular data, with ...

javascriptjqueryhtmlcsshighlighting

Separate the navbar-brand and nav-items onto separate lines within the Bootstrap 4 navbar

I would like to arrange the navbar-brand and nav-items on separate rows. Put the navbar brand on the first row and the navigation items on the second row Existing code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="nav ...

javascriptjqueryhtmlcssbootstrap-4

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...

javascripthtmlajaxshopping-cartshopify

Increasing the margin-left automatically in Bootstrap 3.0.0

I am looking to automatically generate margin-left in the ".card" class "style" element every time a post is entered on a page. My jQuery version is 1.12.4 This is my idea: If the .card CSS style has a margin-left of 0 and width of 479px, set position to ...

javascripthtmlcsstwitter-bootstrap-3gsap

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml

I am encountering a JQuery syntax error while using Bootstrap 3 button-dropdown links

I'm trying to replicate the example found here in order to create a similar markup: <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ...

javascriptjqueryhtmltwitter-bootstrap

I'm having trouble viewing my navigation bar, even though everything seems to be correct

I'm facing an issue where the navigation bar is not visible even though everything seems to be correct. I have checked and double-checked but still can't figure out what's wrong. It's becoming quite frustrating and I'm at a loss fo ...

htmlcssnavigationprogram-entry-point

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

My excitement was palpable when I learned that Bootstrap 4 would be implementing flexbox for a grid system. I anticipated the fast and efficient element sizing capabilities that flexbox offers. However, it appears that Bootstrap 4 simply enhances the exist ...

twitter-bootstrapcssflexboxbootstrap-4

Google's local host connection is currently being refused

Recently, as I was practicing HTML code to work on some forms, I encountered an issue when trying to run the code in the browser by pressing F5. Instead of seeing my code displayed, I received an error message that read: This site can’t be reached local ...

htmlcompiler-errors

The Ajax request is successful on one server but fails on another

I have implemented an ajax call to the UPS address validation webservice. The call is successful when made from my application using this domain: http://serverone.org/addrvalidator. However, if I try using a different domain or an IP address instead of th ...

htmlajaxcross-domaincross-domain-policycross-domain-proxy

Protection of HTML Contact Forms

I'm attempting to send an email using an HTML contact form. Here is the HTML code I've created: <form id="contact_form" action="sendMail.php" method="post"> <input id="firstname" name="firstname" type="text" placeholder="First ...

phpjqueryhtmlajaxemail

The term "landscape" to address the issue of adjusting the Android app screen to display in landscape orientation is not being acknowledged

I am working on an Android app using HTML5 and Cordova. I've included the following code in the manifest.json file as a reference. However, I'm facing an issue where the app screen does not stay fixed horizontally. It only turns sideways when th ...

androidhtmlcordova

The iconic image of Captain America rendered in high-quality SVG

Is there a way to create this star shape using SVG? I have tried using points but it's not working for me. I cannot use the path element. Any suggestions would be greatly appreciated. Thank you. <!DOCTYPE html> <html> <body> ...

javascripthtmlcsssvg

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: https://i.sstatic.net/aqIHk.png Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() =& ...

cssreactjsnext.jshtml5-videochakra-ui

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

javascripthtmljquerycsssharepoint

Eliminating extra space below the footer using CSS in Wordpress site

After recently updating my website, I am struggling with some of the finer points. It's worth noting that I lack experience in web development, despite working in the software field; I am trying to broaden my knowledge. In particular, I have noticed ...

htmlcssfooter

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

Displaying XML data in an HTML table

Encountered a challenge while fetching data from an external XML document using JS. Following the w3schools tutorial for AJAX XML, but faced an issue I couldn't resolve. The XML structure is as follows: <root> <document-id> <author ...

javascripthtmljqueryajaxxml

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap