Adjusting Column Placement in Bootstrap Grid System

I am struggling to achieve a specific bootstrap grid system and could use some guidance.

Here is the grid system I am trying to create:

https://i.sstatic.net/fhEHU.jpg

I have attempted to implement the grid system using the code provided in this JSFiddle.

    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12 border bg-light">
          <h3>Bloc 2</h3>
        </div>
        <div class="col-lg-6 col-md-12 bg-danger">
          <h3>Bloc 3</h3>
        </div>
      </div>
    </div>

The grid system is working fine for the xs and md sizes. However, I am facing difficulties with the lg version, specifically in stacking bloc number 2 (grey) on top of bloc number 3 (red). Is there a way to rearrange the columns to achieve this layout? As shown in the diagram above, bloc number 1 should be positioned at the bottom of the page.

Any help would be greatly appreciated. Thank you!

csstwitter-bootstrapbootstrap-4grid-layout

Answer №1

Essentially, the solution involves encapsulating the gray and red divs within a second column div

<div class="container ">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Section 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, transferred column content here-->
          <div class=" border bg-light">
            <h3>Section 2</h3>
          </div>
          <div class=" bg-danger">
            <h3>Section 3</h3>
          </div>
        </div><!--new div end-->
      </div>
    </div>

You may need to fine-tune the layout for spacing, but this should get you started

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

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

Place one flex item in the center and align another item to the bottom

I am attempting to center one flex item both vertically and horizontally. At the same time, I want some text to remain fixed at the bottom of the flex container. When I use margin-top:auto on the text, it just moves the inner box to the top. Any suggesti ...

htmlcssflexbox

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

htmlcsssemanticssemantic-markup

Is it possible for the `position: fixed` property to interfere with mix-blend-mode, and if so, are there

Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...

css

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for b ...

jquerycssmousemove

adaptive height that scales with content proportionally

I am looking to achieve a responsive height based on the content inside my container. For example, I want the height of the container to adjust according to the text it contains. <!DOCTYPE html> <html lang="en"> <head> < ...

htmlcss

Using React to organize content within a material-ui layout efficiently

Currently, I am developing a React page using material-ui integrated within Electron. The main requirement is to have an AppBar containing Toolbar and Drawer components. To achieve this, I have referred to the source code from https://material-ui.com/demo ...

cssreactjsreact-routerelectronmaterial-ui

Creating a three-column layout in HTML5 with resizable left and center columns, and a fixed right column

Looking to create a full screen layout with three columns, where the left/center column is resizable and the right column remains fixed. Currently using the resize style for the left area, but running into issues as the center area does not adjust in size ...

htmlcss

How do I resolve the issue of a non-iterable 'int' object?

1 How can I troubleshoot the error that is popping up? I believe the issue may be related to it being a dictionary. Any suggestions on how to fix this problem? views search(request): if "q" in request.GET: querystring = request.GET.get(" ...

htmlcssdjango-viewsdjango-templates

Utilize the hexadecimal color code as a string within the darken function

When working with a less style, I have a string variable. @colorString: 'DADADA'; I can convert it into a color: @color: ~'#@{colorString}'; Then, I am able to use @color to define a value in a style: div { color: @color } However ...

cssless

Tips for showing text beyond the confines of a <div></div> container

<div class="signup"> <div>Tenxian アカウントに必要な情報</div><br/> </div> <br/><br/><br/><br/><br/><br/> <div align="center">@2009 Tenxian &nbs ...

csshtml

Changing the position of elements based on screen resolution for Desktop and Mobile

I'm working on a page with a sidebar that contains elements on desktop. When viewed on mobile, the sidebar moves under the main page. However, I would like those elements to be displayed above the main page on mobile, similar to this: Any suggestions ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The functionality of the bootstrap tab('show') is not functioning properly when applied to dynamically loaded tab content

I am currently utilizing ASP.NET MVC along with Bootstrap 3 Within my main view, I have implemented Bootstrap tabs as shown below: <div class="row"> <div class="tabs-container"> <ul class="nav nav-tabs" id="test"> ...

ajaxasp.net-mvctwitter-bootstraptabspartial-views

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

htmlcss

Troubleshooting the compatibility issue between Bootstrap file upload and ASP Ajax AsyncFileUpload

Currently, I am encountering an issue with my ASP web form that involves using Bootstrap alongside the Ajax AsyncFileUpload control. The specific code for the file upload control is as follows: <div id="LoafFileUploadTemplate" class="cust ...

asp.nettwitter-bootstrapbootstrap-4asp.net-ajaxasyncfileupload

Trouble with CSS styling in Asp.Net MVC dropdown list

I have encountered an issue while trying to apply a CSS class to an ASP.NET MVC dropdown list. The CSS class works fine for the EditorFor case, but not for the DropDownListFor case. I am wondering what could be missing from my code? Here is the working CS ...

cssasp.netasp.net-mvc

Ways to move the scroll to the bottom of the div by clicking

Can anyone help with why my scroll code isn't working? I'm trying to make the scroll go to the bottom when I click on $('#openDiv'). For example, when you enter a chat room on stackoverflow, the scroll is automatically at the bottom, a ...

jquerycssscroll

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

javascripthtmlcss

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?

I attempted to replicate the math used for the previous image cuts and added my own image, but it appears blank. Can you identify where the issue lies? #paymentForm { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webk ...

htmlcss

Guide to inserting a custom image into an Icon in next js

For my Next.js 13 and Tailwind project, I am looking to customize a chat/messenger icon by filling it with an image of my choice. While attempting to use the Lucide React Messenger icon, I found that it only allows hex color values for filling, but I want ...

cssreactjsnext.jsiconstailwind-css

React eliminates all white spaces

Presented here is a compilation of various span elements: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> Accompanied by the CSS style for these elements: span{ bac ...

javascriptcssreactjs