Bootstrap 4 : 5 columns per row

Bootstrap 4 : how to use a 5 column grid

by djibe89

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 - How to set 5 columns per row</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4)</p>
        <h2>
          Tutorial
        </h2>
        <p>
          <strong>Problem</strong> : Bootstrap uses a 12 columns grid. So we can easily add, 1, 2, 3, 4 or 6 columns per row. But how do we get 5 columns per row ? Follow me ;-)
        </p>
        <ol>
          <li>We gonna use the magic of CSS3 flexboxes</li>
          <li>Apply the class <code>w-20</code> on each element, it will spread each element on 1/5th of the width or row</li>
          <li>For responsive use, use the w-BREAKPOINT-20 classes (ie w-lg-20)</li>
          <li>Apply the built-in Bootstrap 4 classes <code>d-flex</code> and <code>flex-wrap</code> to the container of these 15 elements for them to fit and align nicely</li>
          <li>Set the responsive breakpoint at which rows can be break (for small devices). You may have to set multiple to have a good look on each device</li>
          <li>Et voilĂ </li>
        </ol>
        <h2>
          Demo
        </h2>
        <p>
          Resize the preview window, no responsive effect.
        </p>
        <div class="d-flex flex-wrap">
          <div class="card card-body w-20">
            <p>
              Card 1
            </p>
            <p>
              Extra long content compared to the cards of the same row but all the elements...

CSS

.w-20 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

@media (min-width: 576px) {
  .w-sm-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 768px) {
  .w-md-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) {
  .w-lg-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 1200px) {
  .w-xl-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}