Creating a Bootstrap row that spans the full height and dynamically wraps content

When working with Bootstrap 4, I encountered an issue where the equal number of split (.col) elements would not move to the next line after any number of columns. To address this, Bootstrap recommends using the (.w-100) class.

While this solution does work, there is a downside - the invisible div used ends up affecting the vertical spacing of the elements, making them appear as though they are taking up space along the vertical axis.

An example illustrating this issue can be seen below.

.wrapper
{
  background: lightgray;
  height: 100vh;
}

.col
{
  background: green;
  box-shadow: inset 0 0 0 2px white;
}

.w-100
{
  background: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="wrapper">

  <div class="row" style="height: 100%">

    <div class="col">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>
    
    <div class="w-100">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>

  </div>

</div>

The area highlighted with the red background indicates a divider and should not have any physical presence, allowing the green elements on two separate lines to spread equally, in a volume of 2.

The challenge here is that the use of the divider (.w-100) element after any number of items (.col) needs to be dynamic.

This is why I am exploring this approach. If there was a set number of columns (.col-0 ... 12), the issue could be easily resolved by leveraging their properties.

Is there a workaround for removing the impact of the red element in flex propagation?

I attempted to set the height of the divider element to 0, but even without its own height, the elements were still not divided into 2 equal sections. An example is provided below.

.wrapper
{
  background: lightgray;
  height: 100vh;
}

.col
{
  background: green;
  box-shadow: inset 0 0 0 2px white;
}

.w-100
{
  background: red;
  height: 0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="wrapper">

  <div class="row" style="height: 100%">

    <div class="col">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>
    
    <div class="w-100">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>

  </div>

</div>

Do you believe this issue to be a bug in Bootstrap?

Answer №1

Can you please review this sample?

I recommend checking out the documentation:

https://getbootstrap.com/docs/4.4/layout/grid/

.container
{
  background: lightgray;
  height: 100vh;
}

.column
{
  background: green;
  box-shadow: inset 0 0 0 2px white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <div class="w-100 h-100">
    <div class="row h-50">
     <div class="column">
      1 of 3 columns
     </div>
     <div class="column">
      2 of 3 columns
     </div>
     <div class="column">
      3 of 3 columns
     </div>
    </div>
    <div class="row  h-50">
     <div class="column">
      1 of 2 columns
     </div>
     <div class="column">
      2 of 2 columns
     </div>
    </div>
  </div>
</div>

Answer №2

Your point is clear, however, upon reviewing the documentation, you will notice that this exact scenario is outlined.

https://i.sstatic.net/BFcH6.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

What is the reason behind the child div exceeding the boundaries of the parent div? I am seeking a detailed explanation rather than just a quick fix

I've designed a basic example to illustrate a point. #container { height: 60%; width: 50%; border-style: double; } #inset { padding: 2%; border-style: groove; height: 100%; width: 100%; } <div id="container"> Parent < ...

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

Using jQuery and CSS to Filter and Sort Content

I need help with filtering a list of content based on their class names. The goal is to show specific items when a user clicks on one of two menus. Some items have multiple classes and users should be able to filter by both menus simultaneously. Currently ...

The CSS property pointer-events: none does not seem to be functioning properly on a contenteditable

Within a parent div element, the pointer-events property is set to none. Inside this div, there is a span element with the contenteditable attribute set to true. Surprisingly, I can still edit the content of the span element in Chrome despite the pointer-e ...

The background image is cropped rather than being resized to fit the screen

I'm having an issue with my website background image responsiveness. It works fine during medium screen size, but when it switches to small and extra-small sizes, the image gets cut off. This means that when I try to view the page on an extra-small sc ...

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

What is the method for changing the color of a specific section of a header?

My header design consists of two lists of buttons, one on the left and one on the right. I am looking to customize the background color of the "Sign Up" button to make it stand out. Below is an example of what I want and the current design of my header alo ...

Flaky structure - Django SelectDateWidget

Currently, I am utilizing crispy forms along with SelectDateWidget in my Django project. Below is a snippet of my sample form: class SignupForm(ModelForm): class Meta: model=NGO fields=['Organization_Name','Contact_Person',&apo ...

Inconsistent column alignment in Bootstrap 4

Hello and thank you for taking the time to assist me. I am currently working with Bootstrap 4, but I have noticed that the grid system is quite different from Bootstrap 3. As a result, I am unsure if the layout issues I am experiencing are due to errors i ...

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

A guide on dynamically generating Bootstrap rows and columns using an ngFor loop

Receiving data from the backend with a number of maps, I need to display them on the page. The placement of the maps is based on even and odd conditions. (For example, if there is only one map, it should occupy the entire page. If there are two maps, they ...

JavaScript code designed specifically for Chrome browser that enables dragging functionality for div elements, unfortunately, it does not function on Firefox

Do you have a moment to help me with a small issue? I created a script that allows you to change the position of a div by dragging it. The script works perfectly in Chrome, but unfortunately, it's not working when I try it in Firefox. var h = windo ...

Trigger a function when an A-frame element is clicked

Is there a way to have an action triggered when clicking on an object within my scene? Specifically, I want to call a function named myFunction upon clicking the object. The object has been assigned the id of #plane1 - can this be utilized to achieve the ...

Creating an interactive R shiny app with golem: incorporating a pre-existing design system (CSS+JS) efficiently

Currently, I am in the process of creating a Shiny App using the golem package. My intention is to incorporate an established design system (located at https://github.com/GouvernementFR/dsfr), which includes numerous css and js files. Suppose my golem Shi ...

Branding image from Bootstrap overlapped with a container situated below the navigation bar

I'm having trouble adding a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. The logo is appearing too large, and even when I try to resize it, it still overlaps the black container and text input box below the Navbar in desktop view. On mob ...

Design a cascading navigation menu using CSS for enhanced user experience

Looking to enhance the W3Schools menu with a multi-level dropdown? Check out the original W3Schools menu for reference here. I've attempted to create a multi-level dropdown as shown in these images: Multi Level Dropdown Photo 1 Multi Level Dropdown Ph ...

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

Can images be placed on the border?

Hi there! I am trying to add an image on a border with a 100px solid width using CSS. I have experimented with positions and z-index, but I can't seem to get the desired effect. Any ideas on how to achieve this? Here is an example image: https://i.sst ...

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

Rule for overriding Bootstrap 4

I've been attempting to modify the color of a navbar link in Bootstrap 4 by using the following code: .nav-link { color: red; } In my SCSS file, I have it set up like this: @import '../../public_html/static/vendor/bootstrap/scss/bootstrap&a ...