How to get 5 columns of equal size on bootstrap grid?

user_13371656 0
Viewed 1770

I want to have my layout to be 5 columns wide but only on xl screens and above. For large screens I want 4 columns and also 4 for medium and 2 for small/extra small.

Currently I have :

<div class="row mb-5">
        {% for item in foobar %}
        <div class="col-6 col-md-3 col-xl-2 py-2">
           /* Content Here */
        </div>
        {% endfor %}
    </div>

This is what I have managed so far. It works for all screen sizes except the xl screens where I would like 5 columns but I am getting 6.

Clearly 12 is not divisible by 5 so I am not sure how to achieve what I want.

What I have attempted to solve the problem:

I tried adding row-cols-xl-5 to the row class after researching some other stack exchange answers but that did not have an effect. Also I tried adding <div class="col offset1-xl"></div> before my divs that contain the content and whilst it did give me 5 cols this was applying on all screen sizes and made adjacent rows not line up properly and was giving weird spacing.

How is the easiest/best way to do this?

I know there is a similar problem on stackexchange already but that is different as it is about getting 5 columns but makes no reference to screen size, I want it to be responsive so only 5 columns on certain size screens!

flexbox css-grid bootstrap-4 twitter-bootstrap css
2 Answers

Did you try the class col-lx alone? it will adapt automatically as you want, like this:

<div class="row mb-5">
   <div class="col-xl col-lg-3 col-md-3 col-sm-6">
      //Content
   </div>
</div>

Please let me know if that helps you.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="row mb-5">
  <div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
  123
  </div>
  <div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-warning">
  123
  </div>
  <div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
  123
  </div>
  <div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-warning">
  123
  </div>
  <div class="col-xl col-lg-3 col-md-3 col-sm-6 bg-danger">
  123
  </div>
</div>

user_36496710

You could create your own css class for 5 columns in a single row. Kindly use media query to apply this class only for xl screens.

Demo snippet:

.col-20{
  width: calc(100% / 5);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create three equal-width columns.</p>
  <div class="row">
    <div class="col-20 col" style="background-color:lavender;">.col</div>
    <div class="col-20 col" style="background-color:orange;">.col</div>
    <div class="col-20 col" style="background-color:lavender;">.col</div>
    <div class="col-20 col" style="background-color:orange;">.col</div>
    <div class="col-20 col" style="background-color:lavender;">.col</div>
  </div>
</div>

</body>
</html>

user_62480820
Related