Bootstrap is having trouble with aligning flex items and preventing them from wrapping to a new row

I am working on a code implementation that dynamically displays flex items, with each item taking up half of the display width. So, after two items, I need to start a new row. Is there a way to add a line break after every two items displayed on the page within the class="d-flex flex-row" container?

    <div class="d-flex mb-3">
        <div class="card col-6 m-3">
            <p>Card 1</p>
        </div>
        <div class="card col-6 m-3">
            <p>Card 2</p>                
        </div>
        <div class="d-flex flex-row"></div>
        <div class="card col-6 m-3">
            <p>Card 3</p>                
        </div>
        <div class="card col-6 m-3">
            <p>Card 4</p>                
        </div>
    </div>
cssflexboxbootstrap-5

Answer №1

Great progress! It seems like the issue lies in how flex handles margins within the element's width. This results in having a (50% + margin) element when using the col-6 m-3 classes, causing elements to jump to the next row.

To fix this, create a wrapper with the col-6 class and keep the margins on the children elements.

Don't forget to add the row class to the parent of your columns as well!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269756974">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row d-flex flex-row mb-3">
      <div class="col-6">
        <div class="card m-3">
            <p>Card 1</p>
        </div>
      </div>
      <div class="col-6">
        <div class="card m-3">
            <p>Card 2</p>
        </div>
      </div>
      <div class="col-6">
        <div class="card m-3">
            <p>Card 3</p>
        </div>
      </div>
      <div class="col-6">
        <div class="card m-3">
            <p>Card 4</p>
        </div>
      </div>
    </div>

Answer №2

Utilize row to create a row instead of using d-flex flex-row. Your code should look like this:

<div class="row">
    <div class="card col-6">
        <p>Card 1</p>
    </div>
    <div class="card col-6">
        <p>Card 2</p>
    </div>
    <div></div>
    <div class="card col-6">
        <p>Card 3</p>
    </div>
    <div class="card col-6">
        <p>Card 4</p>
    </div>
</div>

(cards 3 and 4 will automatically move to a new row if there's no space left) I have removed the margin because adding margins will increase the space occupied by the cards to more than 50%. If you want to add space around the cards, you can wrap the cards inside divs with col-6 classes and then add p-3 to the divs like so:

<div class="row w-100 mx-auto">
    <div class="col-6 p-3">
        <div class="card">
            <p>Card 1</p>
        </div>
    </div>
    <div class="col-6 p-3">
        <div class="card">
            <p>Card 2</p>
        </div>
    </div>
    <div></div>
    <div class="col-6 p-3">
        <div class="card">
            <p>Card 3</p>
        </div>
    </div>
    <div class="col-6 p-3">
        <div class="card">
            <p>Card 4</p>
        </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

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

javascripthtmlcss

The footer on my page seems to be having trouble connecting with the div section above it, causing it to abruptly halt in the middle

After spending a considerable amount of time, I managed to make my footer responsive by sticking it to the bottom of the page regardless of which page you are on. The code that achieved this is as follows: position: absolute; bottom: 0; However, the issu ...

css

One of the quirks of Angularjs is that the ng-enter animation will only be

The initial animation only occurs the first time. I am utilizing Angularjs version 1.2.22 Here is the CSS that I am using : .ng-enter { animation: bounceInUp 2s; } .ng-leave { animation: bounceOutUp 2s; } And this is the route configuration : ...

javascriptcssangularjsanimationng-animate

Transform the header style columns of react-js Material-tables into rows

Currently experimenting with gradient designs on a material table. While I am able to apply the right color combination to the rows, I seem to be getting column-based results on the title of the table. Attached is a screenshot of my output for reference. ...

javascripthtmlcssreactjsmaterial-ui

The functionality of Bootstrap popover is not functioning properly

I'm trying to activate a popover when users hover their mouse over a div. Can I use a popover with a div, or am I missing something in my code? Here's what I have: <div class="grid-item content-text" data-toogle ="popover" data-content="Lorem ...

javascriptjquerycsstwitter-bootstrap

Is there a skilled coder available to troubleshoot this carousel's HTML code?

Hello, I am struggling with the code snippet below that uses Bootstrap to create a carousel. The next and previous buttons are not working properly. <div id="testimonial-carousel" class="carousel slide" data-ride="carousel&qu ...

htmlcssbootstrap-4

Issues with JQuery scroll() / scrollTop() functionality in Internet Explorer and Firefox

Our current script showcases a dotted line starting from the top of the screen leading to an up arrow. The position of the arrow changes based on how far the user has scrolled down the page, allowing them to click on the arrow and scroll back to the top. W ...

javascriptjqueryhtmlcssscroll

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

The fadeOut() function is not functioning properly as the div keeps reappearing even after attempting to

My navigation bar has a unique feature - the subnav expands to fullscreen on hover, while all other subnavs close. However, I encountered an issue with the close button functionality. When clicked, the subnav fades out but then immediately fades back in. ...

javascriptjquerycss

Activate the active class on the icon when hovering over a dynamically generated span using Vue

Is it possible to activate multiple music notes when hovering over one? For example, if I hover over music note 2, both note 1 and note 2 should get active classes. And if I hover over note 3, then all three spans/icons should become active. I have succes ...

cssvue.js

Escape key does not close the modal dialogue box

I’ve customized the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on a webpage. Although it functions as intended, I’m struggling to implement a way to close it by pressing the escape ...

javascripthtmlcssmodal-dialog

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

I created a fiddle and was hoping to enable scrolling, but I have been unable to find a solution. http://jsfiddle.net/sq181h3h/3/ I tried both of these options, but nothing seems to be working: #league_chat { overflow-y:scroll; } #league_chat { ...

css

What are the steps to vertically aligning rows in bootstrap?

I've been exploring different solutions to vertically center my rows within the container. Adding d-flex and align-items-center did work for centering them vertically but caused the rows to appear side by side. I'm curious if there's an alte ...

cssreactjsflexboxbootstrap-5

Tips for managing a date picker with JavaScript using the Selenium WebDriver

I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...

javascriptpythoncssselenium

Tips for aligning the text in a navigation bar to the center

My CSS skills are not very strong. How can I center the text "My Website" in my navbar based on this code? You can view a working example on JSFiddle here: https://jsfiddle.net/cvp8w2tf/2/ Thank you for your assistance! ...

htmlcsstwitter-bootstrapnavbarcenter

display the designated image as a priority

I am designing a loading screen for my website that includes the loading of multiple images, scripts, and other elements. While the HTML and CSS part is working well, I need to ensure that the "loading..." image is loaded before anything else on the page. ...

javascriptjqueryhtmlcss

Organizing grid elements within the popper component

I am struggling to align the labels of options in the AutoComplete component with their respective column headers in the popper component: https://i.stack.imgur.com/0VMLe.png const CustomPopper = function (props: PopperProps) { co ...

javascriptcssreactjsmaterial-ui

Keep fancybox items in their designated spot

When the window is opened at full size, everything looks fine. However, when you resize the window horizontally, the thumbnails shift and disappear. I want them to remain fixed in their position like the large pop-up image so that users can still see them ...

javascriptjqueryhtmlcssfancybox

Tips on adjusting font color without activating the :visited state

Currently, I have set up the following HTML and CSS: <div id = "navi"> <ul> <li><a id = "topLinks" class = "currentPage" href = "index.html"> Home </a></li> <li><a id ...

htmlcss

Sending data through forms

I'm having trouble storing values input through a dropdown menu in variables event1 and event2, despite trying global declarations. How can I successfully store a value to both variables and pass it to the JavaScript code? Thank you. <!DOCTYPE HT ...

javascripthtmlcssforms