wrapping even number of boxes bootstrap 5-CodePudding

I have 4 boxes and I'm trying to set even spaces between them.
The boxes are arranged dependent on the screen size:

if its xxl then the 4 boxes are arranged in the same line
if it's md then two boxes in the first line and the other two in the another line
otherwise, each one in a line

I have this code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
    <div  style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
</div>

This code gets 1. and 3. done (but not 2. as at a certain point a single box get wrapped alone).
I can fix this and get 2. and 3. by wrapping first two boxes together in a div and last two together in other div, but then I can't achieve 1.

CodePudding user response：

Restructuring markup will help you to achieve the desired layout!

.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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>


    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
</div>

CodePudding user response：

If you'll accept a CSS alternative solution consider these:

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
  <div >
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div  style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
</div>

What I did here is make use of flexbox and @media queries to achieve the same effect as bootstrap does. md in bootstrap is >=768px if I remember correctly so setting max-width: 768px on screen size would do the trick.

If you want to learn flexbox click here. For media queries, more on it here.

Using grid and 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div  style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div  style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div  style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div  style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
</div>

What I did on this one is using flexbox for the number1 and 3 effect. And converts to grid when screen-size is 1200px. grid let's you customize 2 dimensions at once, so it's much easier to use it to achieve the 2nd effect you were looking for.