Using Bootstrap 5 to beautifully wrap an even quantity of boxes

My challenge is to optimize the spacing between 4 boxes based on screen size:
The layout should adjust as follows:

  1. If it's xxl or larger, all 4 boxes should be in a single horizontal row.
  2. If it's md or larger, two boxes should be in the first row and the other two in another row.
  3. Otherwise, each box should occupy its own row.

The current code snippet I am working with includes:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3ecf3ee">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid p-0 d-md-flex justify-content-md-evenly flex-md-wrap">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
</div>

This code handles cases 1 and 3 but has difficulty with case 2. Although grouping the first two boxes and last two boxes separately could solve this issue, it would prevent achieving case 1.

cssbootstrap-4bootstrap-5

Answer №1

Reorganizing the structure of your code is key to achieving the desired design!

.example {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  gap: 30px;
}

@media screen and (max-width: 768px) {
  .example {
    flex-direction: column;
    align-items:center;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde2fde0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid p-0 d-xxl-flex justify-content-xxl-evenly">
  <div class="example">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>


    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
</div>

Answer №2

If you're open to exploring alternative solutions using CSS, here are a few options:

Option 1: Using Flexbox:

.custom {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.example {
  display: flex;
  gap: 1rem;
}

@media screen and (max-width: 768px) {
  .custom {
    gap: 0;
  }
  .example {
    flex-direction: column;
    gap: 0;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f203f22">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="custom">
  <div class="example">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
  <div class="example">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
</div>

This approach utilizes flexbox and @media queries to replicate the layout effect achieved by Bootstrap. By setting the screen size to max-width: 768px, it mimics the behavior of the Bootstrap grid.

To learn more about flexbox, click here. For information on media queries, visit here.

Option 2: Utilizing grid and incorporating 2 @media queries:

.custom {
  display: flex;
  justify-content: space-evenly;
}

@media screen and (max-width: 1200px) {
  .custom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .custom {
    display: flex;
    flex-direction: column;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b6479">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="custom">
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
</div>

In this scenario, I've utilized flexbox for certain effects and switched to grid when the screen-size reaches 1200px. With grid, it becomes easier to customize layouts in two dimensions, making it ideal for achieving specific design goals.

Answer №3

After much trial and error, I stumbled upon the answer, which revolved around utilizing the display: contents attribute. This simple concept unlocked the solution I was searching for.

Initially, I struggled to achieve all three objectives - 1, 2, and 3 - until I realized that combining the first two boxes and the last two boxes into separate div elements caused issues with achieving 1.

The roadblock stemmed from the fact that on screens larger than xxl, the parent container's justify-content-xxl-evenly attribute was affecting the wrapping divs instead of the content itself.
By applying display: contents specifically on xxl+ screens, I was able to untangle this issue as it unwrapped the inner content and passed it up to the parent element.

To implement this fix, I made the following adjustments to the final solution:

@media (min-width: 1400px) {
.d-xxl-contents{
    display: contents !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb3acb1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid d-xxl-flex justify-content-xxl-evenly">
    <div class="container-fluid d-flex flex-column align-items-center flex-md-row justify-content-md-evenly d-xxl-contents">
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
    </div>
    <div class="container-fluid d-flex flex-column align-items-center flex-md-row justify-content-md-evenly d-xxl-contents">
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
    </div>
</div>

Despite finding this workaround, I am convinced that a more efficient solution exists, especially considering the potential complexity when dealing with multiple boxes.
I would greatly appreciate any insights or suggestions for a streamlined approach.

Answer №4

The issue arises from the use of fixed column widths. To ensure responsiveness, opt for percentage-based widths and incorporate the max-width property.

Below is a straightforward resolution that avoids @media queries by leveraging bootstrap breakpoints:

.box{
    width: 90%; 
    max-width: 350px;
    height: 100px; 
    background-color: coral;
    margin: 0 auto;
  } 
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f809f82">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row px-0">
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</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

CSS border alignment techniques

I am attempting to achieve the effect of having an orange border on top of a blue border, with only the orange border moving. I have noticed this design feature on various websites but have been unable to replicate it without removing the padding of the pa ...

htmlcss

Achieving Full Height: Making one div occupy the entire height of another

Click here to see a jsfiddle example of what I'm working on. The jsfiddle above demonstrates the issue I'm facing. I am struggling to make the element with the ID #main_info fill the entire height of its parent element #main. My goal is to ensur ...

htmlcss

Having trouble with the automatic closing feature of Bootstrap drop down in React?

While using the drop button feature of Bootstrap, I have encountered a situation where it works fine when clicked on, but disabling it by clicking outside using autoClose='outside' does not seem to work as expected. When I click on my hamburge ...

javascriptreactjsonclickbootstrap-5auto-close

Struggling to click on a link while viewing the site on your mobile device?

Recently dove into the world of implementing mobile responsive design for a website I've been working on. While conducting some testing, I observed that the main tabs which direct users to different sections of the site, normally easy to click on desk ...

htmlcssangularjsmobile

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

javascriptjqueryhtmlcsstwitter-bootstrap

The size of the generated file from tailwind build is compact

I've been working with TailwindCSS and have followed the installation process outlined below. However, after completing the steps, I ended up with a tailwind.css file that only contains 369 lines. This seems to be fewer lines than what others have in ...

cssreactjsnpmtailwind-csscra

`<div>` element with a class of "button" that listens for

I've been attempting to use a userscript to automate a button click. Inspecting the element reveals the button code as: <div class="q-w-btn cl"></div> Unfortunately, the button lacks an id attribute, making it difficult for me to select ...

javascripthtmlcss

Styling elements with CSS to create horizontal and vertical lines between them

Struggling to replicate the design elements from this image using CSS. Specifically, I need help creating a horizontal yellow line over the title "nossos numeros" and vertical blue lines between "Cursos", "Alunos", and "Aulas". I am working with Bootstrap ...

csstwitter-bootstrap-4

Transparent dropdown elements using Bootstrap

I'm trying to incorporate a transparent bootstrap dropdown into my form. Specifically, I want the button itself to be transparent, not the dropdown list that appears when the button is clicked. Here's an example of what I currently have: https: ...

csstwitter-bootstrapdropdown

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

javascriptcssangulartypescript

"Mastering the art of text animation: A beginner's guide

If you want to see a cool moving text animation, simply head over to this link: . The text will automatically type out and then clear just like the example below: https://i.sstatic.net/dAZW6.png Ever wondered how to create this kind of text animation? A ...

htmlcssreactjsangularweb

The active class in the navbar is malfunctioning in Bootstrap 4

I've been searching high and low to figure out how to add an active class to the current open link in my navbar. I've scoured Google and Stack Overflow for answers, but everything I found only applies to hash-type navbars using href="#". None of ...

javascriptjquerytwitter-bootstrapbootstrap-4dom-events

Include a navigation bar in the footer of my WordPress Theme's footer.php file

Looking for help with adding a custom footer to my WordPress theme. I have successfully uploaded my static website here, and now I am in the process of making it dynamic. I have added my primary menu to WordPress, but I am unsure of how to exactly add a fo ...

phphtmlcsswordpress

Unable to Locate CSS File in Separate Folder in HTML

I am struggling to link my stylesheet from a different directory to my HTML files, even though I believe I am using the correct method. Could it be that I am targeting the wrong level? '-' represents levels Take a look at my file structure: my ...

htmlcssnode.js

Tips for aligning images inside tab content areas

While using an "accordion" jQuery to show a contact list, I have encountered a challenge that may seem simple to someone experienced in this. Here is the code snippet: <!doctype html> <html lang="en> ... (Code continues) I am looking to add ...

jqueryhtmlcss

duplicate styling for individual table cells

I am in need of a span element inside a td tag that I am generating within a table. In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it star ...

htmlcss

Is there a way to use jQuery to make a div fade in and toggle over another

I have created a test page and I am looking to achieve a specific effect when the page loads. I want everything on the page to be hidden initially. When I click on the "About" text, I want it to fade in using fadeToggle(); however, when I click on "My work ...

javascriptjqueryhtmlcss

Having trouble pinpointing the CSS/jQuery conflict and resolving it

Take a look at this page: At the top right of the website, you'll find a search box. However, it appears to be poorly designed. On this page, you can see the normal and desired behavior: (click on 'advertenties' to view the jquery effect). ...

jquerycssconflict