The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below

View Image

I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5.

<div class="container-fluid">
 <div class="row">
    <div class="col-md-6" style="background-color: palegreen;">.col-md-6</div>
        <div class="col-md-6" style="background-color: red;">.col-md-6
            <div class="row">
                <div class="col-md-8" style="background-color: purple;">.col-md-8</div>
                <div class="col-md-4" style="background-color: aqua;">.col-md-4</div>
            </div>
        </div>     
</div>
htmlcssbootstrap-5

Answer №1

Here is a code snippet for creating a responsive layout:

<style>
        .red {
            background-color: red !important;
        }

        .green {
            background-color: green;
        }

        .yellow {
            background-color: yellow;
        }

        div {
            height: 50px;
        }

        .double {
            height: 100px !important;
        }
    </style>


<div class="container">
    <div class="row">
        <div class="col-5">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 yellow double">
                        A
                    </div>
                    <div class="col-6 green">
                        A
                    </div>
                    <div class="col-6 red">
                        B
                    </div>
                </div>

            </div>
        </div>
        <div class="col-7">
            <div class="row">
                <div class="col-4 red">
                    A
                </div>
                <div class="col-4 yellow">
                    B
                </div>
                <div class="col-4 red">
                    C
                </div>
                
            </div>
            <div class="row">
                <div class="col-8 double">
                    <div class="row">
                        <div class="col-12 green">
                            A
                        </div>
                        <div class="col-6 yellow">
                            B
                        </div>
                        <div class="col-6 red">
                            A
                        </div>
                    </div>
                </div>
                <div class="col-4 yellow double">
                    B
                </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

Tips for ensuring browsers maintain the aspect ratio specified by width and height HTML attributes when CSS is applied

I am seeking a method to reserve space in my layout for images before they are loaded by adding width and height properties to the img element. This approach functions as anticipated: img { display: block; border: 1px solid tomato; } <img src="" ...

htmlcssimage

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

While working on styling my web pages with CSS and Bootstrap, I came across a few classes like "masthead pdng-stn1" and "phone-box" in the code. Despite searching through the bootstrap.css file and all other CSS files in my folders, I couldn't find a ...

javascriptcss

Troubleshooting problem with aligning grid items at the center in React using

I've been facing a challenge in centering my elements group using the material ui grid system. Problem: There seems to be excess margin space on the extreme right. Code snippet: const renderProjects = projects.map(project => ( <Grid item ...

cssreactjsmaterial-uinext.js

The hyperlink to a different webpage does not trigger any JavaScript functionalities or render any CSS styles

I am facing an issue with linking HTML pages that run Javascript and JQuery Mobile from another HTML page. My link setup is as follows: <a href="hours.html">Hours</a> The linking page and the linked pages are in the same directory. However, ...

javascripthtmlcsshyperlink

Make window.print() trigger the download of a PDF file

Recently, I added a new feature to my website allowing users to download the site's content by following these instructions: Printing with Javascript || Mozilla Dev. Essentially, the user can print a newly formatted site stored in a hidden iframe. Now ...

javascripthtmlpdfiframe

Struggling to find your way around the header on my website? Let me give

I'm looking to display certain links prominently at the top of a page, similar to this example: "home > page1 > link1 > article 1." Can someone advise on how to achieve this using HTML, PHP, or jQuery? ...

javascriptphpjqueryhtml

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png Once the user enters th ...

htmlcssangularless

Adjust the autofocus to activate once the select option has been chosen

Is there a way to automatically move the cursor after selecting an option from a form select? <select name="id" class="form-control"> <option>1</option> <option>2</option> <option>3</option&g ...

javascripthtml

Outlook failing to recognize text dimensions

Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...

htmlcssoutlookhtml-emailfont-size

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Choose the list item below

I'm working on a website that includes a select list with images. Here's what I have so far: When I choose an image from the list, it should display below. <?php // Establish database connection $con=mysqli_connect("******","***","*** ...

phpjavascripthtmlweb

Alter the position of the anchor object in the center using JavaScript upon page load

When my page loads, I want to automatically jump to a specific anchor tag and ensure that the anchor object is centered in the window. Initially, I implemented a basic function to achieve this: <body onload="goToAnchor();"> <script type="text/ja ...

javascriptjquerycssanchoronload

Tips for integrating DataTables selection filtering functionality

Here's a snapshot of my screen I'm attempting to utilize data tables This is what I have on the main page $('#student-listing-table').dataTable(); $('#student-listing-table').find('label').html('Search By Nam ...

phpjqueryhtmldatatabledatatables

Struggles encountered while developing a JavaScript calendar

Hey guys, I'm encountering an issue with Uncaught TypeError: document.getElementById(...) is null. I believe the problem lies in the way types are being parsed for document.getElementById(dayOfWeek).appendChild(dayPTag);. This code is meant to display ...

javascripthtmlnullcalendartypeerror

Angular dynamically changes the placeholder text in an input based on a selection made in a mat select dropdown

Trying to change the placeholder text in a mat-input based on selection in mat-select, but struggling to bind it to the selected option. <mat-form-field appearance="outline" class="search-field" style="width:40vw"> ...

htmlangular

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

jqueryhtmlcss

Issues with the performance of input range sliders in iOS Safari is causing frustration

I recently developed a basic range slider component for an application built with NextJS. This component utilizes an <input type="range"> element. While the range slider functions properly on Desktop and Android devices, I encountered sign ...

htmlreactjsnext.jssafari

Advanced data synchronization with Angular 7's bidirectional data binding feature

One input box allows users to enter a number, and I would like to adjust the width of the background color based on that number. The box itself will have a fixed width, but I am looking to dynamically change the width of the background color according to ...

cssangulardynamicdata-bindingstyles