CODEWITHSUNDEEP
cssbootstrap-5
user13286
user13286

Reputation: 3085

Bootstrap 5 - 5 equal columns break down to two rows centered on medium devices

On desktop sizes I have 5 equal width columns that are spaced evenly. On mobile I will break down to 1 column and then on medium sizes I want it to break down into two rows with the bottom row evenly spaced and centered below the top row like this:

enter image description here

Is there a way to do this with Bootstrap 5 built-in classes or would I have to add some custom CSS to make this possible? Here's what I have so far:

img {
  max-width:100%;
}
.row .col-6 {
  margin-top:30px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row text-center justify-content-between">
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col-6 col-md-auto">
      <img src="https://via.placeholder.com/200x100" />
    </div>
  </div>
</div>

Unfortunately, as you can see, what that does is align the 4th column directly below the 1st column and the 5th column directly below the 3rd column.

Upvotes: 0

Views: 725

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362820

"On mobile I will break down to 1 column and then on medium sizes I want it to break down into two rows"

Make sure you use col-12 to get a single column on mobile and then simply justify-content-center the row...

<div class="container">
    <div class="row text-center justify-content-center">
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-auto">
            <img src="https://via.placeholder.com/200x100" />
        </div>
    </div>
</div>

Codeply

But, you didn't specify if you want 2 rows on md and wider, or only on md. If you want 2 rows on md and wider this use specific column sizes like col-md-4.

<div class="container">
    <div class="row text-center justify-content-center">
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
        <div class="col-12 col-md-4">
            <img src="https://via.placeholder.com/200x100" />
        </div>
    </div>
</div>

Upvotes: 1

Egor Tyurin
Egor Tyurin

Reputation: 43

Try using .justify-content-md-evenly and .row-cols variations.

img {
  max-width: 100%;
}

.row [class^="col"],
.row [class*=" col"] {
  margin-top: 30px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row row-cols-1 row-cols-md-auto text-center justify-content-between justify-content-md-evenly">
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/200x100" />
    </div>
  </div>
</div>

Upvotes: 1

Related Questions