How to make a vertical divider between columns the same height in bootstrap?

Question

I've seen similar questions, but answers didn't help. There was only one that got me close enough to what I want, but there are other issues arising from it. I'm trying to get the vertical divider to be the same height all the time, but when each column have a different amount of elements it doesn't work.

HTML

<nav id="subCategories" class="row navbar bg-light">
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>BIKES</h6>
      <li class="nav-link subCategory">FULL SUSPENSION</li>
      <li class="nav-link subCategory">HARDTAIL</li>
      <li class="nav-link subCategory">E-BIKES</li>
      ...
   </div>
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>EQUIPMENT</h6>
      <li class="nav-link subCategory">HELMETS</li>
      <li class="nav-link subCategory">PROTECTORS</li>
      <li class="nav-link subCategory">GLOVES</li>
      <li class="nav-link subCategory">JERSEYS</li>
      <li class="nav-link subCategory">PANTS</li>
      ...
   </div>
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>PARTS</h6>
      <li class="nav-link subCategory">GPS</li>
      <li class="nav-link subCategory">LIGHTS</li>
      ...
   </div>
   <div class="col-lg-3 col-4">
      <h6>FOR THE BIKE</h6>
      <li class="nav-link subCategory">SCOOTER PARTS</li>
      <li class="nav-link subCategory">BMX PARTS</li>
      <li class="nav-link subCategory">TYRES/TUBES</li>
      <li class="nav-link subCategory">CHAINS</li>
   </div>
</nav>

CSS

.subCategory {
   border-right: 1px solid grey;
}
#subCategories {
   align-items: flex-start;
}

The closest I got it to work was to use css like this:

.subCategory {
   border-right: 1px solid grey;
   display: table-cell;
}
#subCategories {
   align-items: flex-start;
   display: table;
}

subCategory {
   border-right: 1px solid grey;
}
#subCategories {
   align-items: flex-start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="subCategories" class="row navbar bg-light">
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>BIKES</h6>
      <li class="nav-link subCategory">FULL SUSPENSION</li>
      <li class="nav-link subCategory">HARDTAIL</li>
      <li class="nav-link subCategory">E-BIKES</li>
      ...
   </div>
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>EQUIPMENT</h6>
      <li class="nav-link subCategory">HELMETS</li>
      <li class="nav-link subCategory">PROTECTORS</li>
      <li class="nav-link subCategory">GLOVES</li>
      <li class="nav-link subCategory">JERSEYS</li>
      <li class="nav-link subCategory">PANTS</li>
      ...
   </div>
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>PARTS</h6>
      <li class="nav-link subCategory">GPS</li>
      <li class="nav-link subCategory">LIGHTS</li>
      ...
   </div>
   <div class="col-lg-3 col-4">
      <h6>FOR THE BIKE</h6>
      <li class="nav-link subCategory">SCOOTER PARTS</li>
      <li class="nav-link subCategory">BMX PARTS</li>
      <li class="nav-link subCategory">TYRES/TUBES</li>
      <li class="nav-link subCategory">CHAINS</li>
   </div>
</nav>

The question is clear to understand, but we can't really help without the actual code — Ramon de Vries, Sep 09 '20 at 11:06
Does this answer your question? [vertical divider between two columns in bootstrap](https://stackoverflow.com/questions/14580346/vertical-divider-between-two-columns-in-bootstrap) — Priya jain, Sep 09 '20 at 11:09
@Priyajain I tried it before and it works nicely if it's only 2 columns. But for multiple once it doesn't. — Lukas Luke Stateczny, Sep 09 '20 at 11:35

score 1 · Accepted Answer · answered Sep 09 '20 at 12:34

Just change align-items of #subCategory from flex-start to stretch.

subCategory {
   border-right: 1px solid grey;
}
#subCategories {
   align-items: stretch;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="subCategories" class="row navbar bg-light">
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>BIKES</h6>
      <li class="nav-link subCategory">FULL SUSPENSION</li>
      <li class="nav-link subCategory">HARDTAIL</li>
      <li class="nav-link subCategory">E-BIKES</li>
      ...
   </div>
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>EQUIPMENT</h6>
      <li class="nav-link subCategory">HELMETS</li>
      <li class="nav-link subCategory">PROTECTORS</li>
      <li class="nav-link subCategory">GLOVES</li>
      <li class="nav-link subCategory">JERSEYS</li>
      <li class="nav-link subCategory">PANTS</li>
      ...
   </div>
   <div class="col-lg-3 col-4" style="border-right: 1px solid grey">
      <h6>PARTS</h6>
      <li class="nav-link subCategory">GPS</li>
      <li class="nav-link subCategory">LIGHTS</li>
      ...
   </div>
   <div class="col-lg-3 col-4">
      <h6>FOR THE BIKE</h6>
      <li class="nav-link subCategory">SCOOTER PARTS</li>
      <li class="nav-link subCategory">BMX PARTS</li>
      <li class="nav-link subCategory">TYRES/TUBES</li>
      <li class="nav-link subCategory">CHAINS</li>
   </div>
</nav>

Thats it! Thanks a lot! – Lukas Luke Stateczny Sep 09 '20 at 13:15 — Lukas Luke Stateczny, Sep 09 '20 at 13:15

How to make a vertical divider between columns the same height in bootstrap?

1 Answers1