How can I get the bootstrap grid to span across multiple rows?

I'm trying to create a collage of images using Bootstrap 5, but I can't figure out how to make elements span multiple rows. Here's the layout I want to achieve:

https://i.sstatic.net/JjnF0.png

(guess I don't have a good reputation yet...)

Here is the code I currently have:

<div class="container">
            <div class="row">
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
            </div>
            <div>
                <img src="flowers.jpg" alt="placeholder">
            </div>
            <div>
                <img src="flowers.jpg" alt="placeholder">
            </div>
        </div>

I've structured it like a grid, but I'm struggling to make certain elements span across multiple rows instead of columns. How can I achieve this?

Answer №1

There are numerous methods to achieve a layout like this. Here are a couple that I frequently utilize.

  • You have the option to construct a column that includes multiple rows.
    <div class="container">
      <div class="row">
        <div class="col">Outer row 1, column 1 - spans two rows (column 2 has two rows)</div>
        <div class="col">
          <div class="row">
            <div class="col">Inner row 1, column 1</div>
            <div class="col">Inner row 1, column 2</div>
          </div>
          <div class="row">
            <div class="col">Inner row 2, column 1</div>
            <div class="col">Inner row 2, column 2</div>
            <div class="col">Inner row 2, column 3</div>
          </div>
        </div>
        <div class="col">Outer row 1, column 3 - spans two rows (column 2 has two rows)</div>
      </div>
    </div>
    
  • You can also leverage the row-cols-* classes.
    <div class="container">
      <div class="row row-cols-2">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
      </div>
    </div>
    

Additionally, you can utilize col-*-* to define the appearance and behavior of your columns in detail. For more examples and helpful information, refer to the official grid system documentation.

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

Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well. <div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "vie ...

Switching the navbar state from a regular mode to a collapsed mode can be done manually

I need help with my navbar design: <nav class="navbar fixed-top navbar-expand-sm navbar-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle=&q ...

Issue found (in promise): Invalid Syntax detected at script.js line 8, character 42

I am in the process of developing a tool that retrieves ROBLOX asset IDs using this particular API. I am utilizing the product info function through an API GET request. Despite being near completion, I keep encountering the error Uncaught (in promise) Synt ...

Detecting the directional scrolling on a page with the rubber band effect disabled

html { height: 100%; width: 100%; overflow: hidden; } body{ margin: 0; min-width: 980px; padding: 0; height: 100%; width: 100%; overflow: auto; } In order to prevent macOS rubber band scrolling and detect the scroll directi ...

Activate CSS modules in ReactJS by incorporating a .module extension to the CSS file

Being new to ReactJS, I recently learned about enabling CSS modules and discovered the following: If you append .module to a class name, it will generate a base64 hash string for that class As an example, I created a function-based component called Lay ...

"Unusual bug in IE causing cell borders to disappear when colspan is used

Below is a sample table layout that I am working with: <table> <thead> <tr> <th>t1</th> <th>t2</th> <th>t3</th> <th>t4</th> ...

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

Learn how to design a div with an arrow pointing upwards that contains content. Utilize HTML and CSS to create this unique visual element. Each arrow should have a hover effect that only activates when hovering over

I attempted this previously with just an arrow image, but due to the rectangular shape of the div section, the area without the arrow remains hoverable. Is there a method to customize the div to mirror the image below, ensuring that only the arrow is clic ...

Scroll to a new section of the page if the specified id or name cannot be found

Currently, I am dealing with an exceptionally lengthy textual content page. <p class="parahead">401. Heading </p> <p>other html content</p> <p class="c2">some more data</P> ... <p class="parahead">402. Another hea ...

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

Positioning a box at the bottom rather than at the top

I am on the lookout for a solution to shift/arrange divs to the bottom instead of the top. For example, when attempting to delete some of the divs with the "box" class in this code snippet: Current code: #hol ...

Adjust the row based on the smallest picture

I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around. <div class="contai ...

Struggling to concentrate on the branding

I've been using materializecss for some time now and recently encountered an issue while trying to navigate my website using keyboard tabbing. The checkbox in materializecss is a custom CSS checkbox, but when I set the tabindex for the label of the c ...

Creating a wider background color for active nav bar links in CSS - A step-by-step guide

I've been working on customizing a CSS navbar and I've managed to get it to work as desired. However, I'm facing an issue with the active state background color, which seems to be the same width as the text itself. I've spent hours sear ...

The div functions seem to stop working properly after they have been multiplied

Initially, I use JavaScript to multiply the div but then encounter issues with the function not working properly. function setDoorCount(count) { $('.doors').html(''); for (var i = 0; i < count; i++) { var content = " ...

How can images be resized in relation to the window size while maintaining specific pixel margins?

I'm looking to achieve a centered image on the screen that stretches horizontally while maintaining set margins of 200px on each side. It's important that the image scales proportionally and remains centered regardless of the window size. Althou ...

What is the process for changing the color of my input fields to black and text to blue?

<form method="post" action="https://ip/form.php"> First name<br> <input type="text" name="fname" value=""><br> Email Address:<br> <input type="text" name="email" value=""><br> Phone: <br> <input type="text ...

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information. I am currently developing a website that allows users to add movies to collections. On the collections page, al ...