Bootstrap columns stacking in a disorganized manner

I'm struggling to correctly stack my columns using bootstrap. The image shows that I need the black box to be positioned below the green box, but I can't seem to get it right:

https://i.sstatic.net/7bvN6.png

This is the code I have been using:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

I'd appreciate any help on figuring out where I may have made a mistake.

Thank you

csstwitter-bootstrapbootstrap-4

Answer №1

When working with 2 columns, you can place the first div in one column and the second div in the other. Placing a black div below the green one can be achieved by inserting an additional blank div.

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

Answer №2

Bootstrap 4 prioritizes mobile devices, so the first step is to reverse the order of your classes.

The issue lies in setting the width of your boxes to half the width of the row on desktop, which causes rows to wrap by default in bootstrap.

To solve this, set the columns to full width using col-12.

<div class="container-fluid">
    <div class="row">
        <div class="col-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-12 " style="background-color:green; height:300px;"></div>
        <div class="col-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

EDIT:

If you still want the columns to be half the width of the row without wrapping, you can add an offset:

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:blue; height:600px;"></div> 
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:green; height:300px;"></div>
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:black; height:300px;"></div>
    </div>
</div>

Answer №3

To create a nested structure, simply place the blue and green columns within another column.

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
    <div class="col-lg-6 col-md-12 ">
      <div style="background-color:green; height:300px;"></div>
      <div style="background-color:black; height:300px;"></div>
    </div>
</div>

This arrangement keeps the green and black columns within the "right" side. Other methods may alter the bootstrap grid or separate the content, which may not be preferable.

Answer №4

Unlike its predecessor Bootstrap 3, Bootstrap 4 utilizes Flexbox which means columns do not "float" next to each other by default. However, you can still achieve this effect by enabling floats on screen widths of lg and above.

Take note of the d-lg-block and float-left classes being used.

<div class="container-fluid">
    <div class="row d-lg-block">
        <div class="col-lg-6 col-md-12 float-left" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 float-left" style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12 float-left" style="background-color:black; height:300px;"></div>
    </div>
</div>

For more information, check out: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

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

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Following an AJAX request, jQuery.each() does not have access to the newly loaded CSS selectors

Note: While I value the opinions of others, I don't believe this issue is a duplicate based on the provided link. I have searched for a solution but have not found one that addresses my specific problem. Objective: Load HTML content to an element u ...

javascriptjqueryhtmlcssajax

What are some ways to change the appearance of a component using its parent?

In order to make changes to the CSS properties of a Vue component from its parent, effectively overriding any existing styles within the component, I am seeking a solution. Initially, I assumed that styling a component like <my-component> directly f ...

cssvue.jsvue-component

Avoid using the table and table-striped classes when working with Bootstrap 5 to ensure a

Recently updated to bootstrap5.0.0-beta3 along with bootstrap-table 1.18.2 from webjars repository. Here's the code snippet: <table id="table">...</table> <!-- no classes here --> $('#table').bootstrapTable({ ...

cssbootstrap-tablebootstrap-5

Increase the gap between columns in Bootstrap for a better layout

I have implemented a web layout using bootstrap 3. You can view the JSFiddle here. In order to make the layout responsive, I had to structure it in a slightly unconventional way. The final output on small screens includes three information boxes within an ...

htmlcsstwitter-bootstrap

How about: "Is there a way to show items in a list without using

I have removed the bullet points from an unordered list, but I am having trouble displaying Log with every message. The code I have doesn't seem to be working as expected. I want users to be able to differentiate between messages easily, without seein ...

javascripthtmlcssangularjs

The fullscreen API allows for the creation of a full-screen element containing internal elements, while also enabling the functionality

Is it possible to utilize the fullscreen API to make any element fullscreen, even if it contains multiple internal elements, while still maintaining the functionality of dropdowns and other custom elements that may be located in different areas of the page ...

javascriptjqueryhtmlcssjquery-ui

Foundation Framework sidebar by Zurb

My current dilemma involves the zurb foundation framework, specifically with the .row class being set to a max-width of 61.25em, which is equivalent to 980px in width. The problem I am facing is that when I resize the browser and it reaches 1024px wide, t ...

htmlcssresponsive-designzurb-foundation

The server's file URLs are modified within the page source of a WordPress site

I've been attempting to integrate Adsense code into a WordPress blog at demonuts.com. I placed the Google code in the TEXT WIDGET provided by WordPress. However, upon running the website, I noticed that the URLs for .js, .css, or .png files are being ...

javascriptphphtmlcsswordpress

Attempting to output "</ul>" specifically for particular elements within an array

I am currently working on a project where I need to display category names and list any post that belongs to that category in a bootstrap list group. The issue I am facing is how to properly echo the closing <ul> tag at the end of each category so th ...

phptwitter-bootstrapmysqli

W3C validation issue: "Failure to immediately follow a start-tag with a null end-tag" and similar errors

Encountering validation errors with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

cssxhtmlw3c-validation

What is the best way to emphasize a table column when a cell is selected?

I successfully implemented a feature where a cell (td-element) is highlighted when clicked by the user. However, I now want the entire column to be highlighted with the cell itself having a slight variation. I am struggling with achieving the last part ...

javascriptjqueryhtmlcss

What is the best way to align inline circles created with CSS vertically as the screen size changes?

Looking for resources on how to create circles using CSS? It can be a bit tricky, but here is the code you need: HTML <div id="wrapper"> <ul id="circles"> <li> <div class="circle"><div>K&l ...

htmlcssresponsive-designgeometry

Concentrating on a Div Element in React

I'm trying to set up an onKeyPress event that will be triggered when a key is pressed while a 'Level' element is displayed. I know that the div needs to be focused for events to register, but I'm not sure how to do this with functional ...

javascripthtmlcssreactjs

Design elements for React and Angular JS

Is there a way to design UI components in a style that is compatible with both Angular JS and React? These two technologies will be utilized simultaneously within the same application. ...

cssangularjsuser-interfacereactjs

Centered vertically: Enhancing buttons with Bootstrap 3

I am struggling to vertically center a group of buttons within a column (as seen in the image). The height of the row is variable and I have tried numerous approaches without success. Screenshot: <div class="row question even"> <div class=" ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

htmlcssangularflexbox

Ways to insert a div element into the HTML display utilizing JavaScript

There's a method I'd like to use to dynamically add a div to the view using JavaScript. I attempted hiding the div on page load and then showing it through JavaScript. However, what ends up happening is that the div content appears briefly on l ...

javascripthtmljquerycss

Creating a Scrollbar within a Bootstrap Dropdown: a Complete Guide

Is there a way to create a scrollbar within a bootstrap 4 dropdown selection? I am facing an issue where the dropdown does not fully load when there are too many files. My solution is to display only 5 files when the dropdown is clicked and include a scrol ...

htmlcssdrop-down-menubootstrap-4

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

javascriptjqueryhtmlcssajax