Having trouble implementing a nested grid system in Bootstrap

Struggling with creating a grid layout that looks like the one in this image.

I initially thought of setting up a row with 2 divided columns, then adding another row+column within each of those 2 columns to place a card inside.

This is an excerpt of my code:

<div class="container">
  <div class="row">
    <div class="col-8">
      Modules
      <div class="module-container">
        <div class="row">
          <div class="col-3">
            <div class="card">
              <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
              <div class="card-body">
                title
              </div>
            </div>
          </div>

          <div class="col-3">
            <div class="card">
              <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
              <div class="card-body">
                title
              </div>
            </div>
          </div>

          <div class="col-3">
            <div class="card">
              <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
              <div class="card-body">
                title
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-3">
              <div class="card">
                <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                <div class="card-body">
                  title
                </div>
              </div>
            </div>

            <div class="col-3">
              <div class="card">
                <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                <div class="card-body">
                  title
                </div>
              </div>
            </div>

            <div class="col-3">
              <div class="card">
                <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                <div class="card-body">
                  title
                </div>
              </div>
            </div>
          

        
   <div class="col-4">
      Schedule
      <div class="row">
        <div class="col-6">
          <div class="card">
            <img src="/images/star.jpg" class="card-img-top" alt="module 1">
            <div class="card-body">
              title
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            <img src="/images/star.jpg" class="card-img-top" alt="module 1">
            <div class="card-body">
              title
            </div>
          </div>
        </div>
   </div>

When I checked the result, it didn't come out as expected. Check out my layout. Any idea why the cards in my second row are different lengths?

htmlcssgridbootstrap-5

Answer №1

Begin by creating an outer row and adding two columns. Inside the first column, add another row and assign your desired number of columns using col-3 and col-4. Repeat this process for the second column. The following script should provide guidance:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e5fee3fee0fdb1bca0b8b1e1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <!-- Outer grid in first column -->
        <div class="col-8">
            Modules
            <div class="module-container">
                <!-- First column inner grid -->
                <div class="row">
                    <div class="col-4">
                        <div class="card">
                            <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                            <div class="card-body">
                                title
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="card">
                            <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                            <div class="card-body">
                                title
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="card">
                            <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                            <div class="card-body">
                                title
                            </div>
                        </div>
                    </div>
                    <div class="col-4 mt-2">
                        <div class="card">
                            <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                            <div class="card-body">
                                title
                            </div>
                        </div>
                    </div>
                    <div class="col-4 mt-2">
                        <div class="card">
                            <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                            <div class="card-body">
                                title
                            </div>
                        </div>
                    </div>
                    <div class="col-4 mt-2">
                        <div class="card">
                            <img src="/images/pat.jpg" class="card-img-top" alt="module 1">
                            <div class="card-body">
                                title
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Outer grid in second column -->
        <div class="col-4">
            Schedule
            <!-- Second column inner grid -->
            <div class="row">
                <div class="col-6">
                    <div class="card">
                        <img src="/images/star.jpg" class="card-img-top" alt="module 1">
                        <div class="card-body">
                            title
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <img src="/images/star.jpg" class="card-img-top" alt="module 1">
                        <div class="card-body">
                            title
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

Request Fancybox from parent document within an iframe

I have two pages, my index.html and social.html. I recently cleaned up my index.html file and left only the necessary jQuery code for using fancybox. My goal is to display images from social.html within fancybox when clicked on, but it should open in index ...

jqueryhtmliframefancybox

What is the process for transmitting data in JSON format generated by Python to JavaScript?

Utilizing Python libraries cherrypy and Jinja, my web pages are being served by two Python files: Main.py (responsible for handling web pages) and search.py (containing server-side functions). I have implemented a dynamic dropdown list using JavaScript w ...

javascriptpythonhtmljsoncherrypy

Make the text in the SCSS file placeholder bold

Within my Angular front end application, there is a form containing a textarea: <mat-form-field class="full-width"> <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/> </mat-form-field> In the co ...

cssangularhtml

Understanding the significance of 'href = '<? = variable ?>' on an HTML/PHP webpage

I must admit, I have a slight inkling that I'll feel a tad foolish once it's clarified, but could someone kindly explain what the following statement accomplishes? href='<?= $authUrl ?>' This line is extracted from the Google AP ...

phphtml

What is the best way to retrieve the content of HTML tags from a string using JavaScript or AngularJS?

I have a string with mixed content of HTML tags and text. Here is an example: var str = "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height=" ...

javascripthtmlangularjs

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

Web development can be frustrating at times. Hopefully, someone out there can shed some light on this issue and offer a solution. You can view the HTML/CSS code below or check out this example on JSFiddle The problem arises when I have a header div and a ...

htmlcss

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

javascriptjqueryhtmlcss

Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...

htmlcss

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

javascripthtmldom

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

Guide on retrieving data from two separate tables within a single database using PHP

I am currently working on a shopping website where I have a table called "products" that stores all the product data. Additionally, there is a separate table named "cart" which contains the products added to the cart, including product ID and user ID. On t ...

phpmysqldatabasehtml

How to ensure an element is always aligned at the end of a line in ReactJS, no matter the screen dimensions

I have a unique element that rotates words at a set interval. <div className="inline-block flex justify-center items-center before:content-['lore_ipsum_dolor_lore_ipsum_dolor'] drop-shadow-[0_3px_3px_rgba(0,0,0,1)] t ...

htmlreactjstailwind-css

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

javascriptjqueryhtmlcssrollover

Can the hexadecimal code for a particular color name be identified?

Similar Question: Javascript function to convert color names to hex codes Is there a way to determine the hexadecimal value of a named color that is currently being used by the browser? For example, I would like to achieve something similar ...

javascriptjquerycssdomcolors

Styling Dynamic HTML Content in Angular: Tips and Tricks

After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...

htmlcssangular

Using PHP and mysqli to upload binary data to a database through a form

I'm facing an issue while attempting to upload an image into a database as a blob using PHP with the mysqli extension. When I try to insert just the image name using a query, everything works perfectly fine, and a new row with the name is successfully ...

phphtmlmysqliblob

Manipulating a cloned object using jQuery

var clonedForm = $('form').clone(); //clonedForm.find('input[type="hidden"]').remove(); clonedForm.find('select').each(function(){ $($(this).val()).insertAfter($(this)); $(this).remove(); }); Atte ...

jqueryhtmldom

Customizing the step function of HTML5 input number with jQuery: A guide

Is there a way to modify the step value in HTML5 number inputs for my web application? I would like it to increment and decrement by 100 instead of 1. I attempted the following approach: $("#mynumberinput").keydown(function(e){ if (e.keyCode == 38) / ...

javascriptjqueryhtmlkeydownkeycode

Arrange elements side by side within siblings, while keeping the HTML structure intact

As evident from the code snippet, there are 2 dynamically generated flex divs (although there could be more). Is there a method to horizontally align items on larger screens without altering the HTML structure? I am seeking something similar to: https:/ ...

htmlcss

Deactivate the child division by the nth parent division

At the end of my question, I have included a dynamically created div structure with the id "forth-three-one". Now, I need to find a way to disable or hide the input inside this specific div. Directly using the id "forth-three-one" is not an option as it w ...

jqueryhtml