Tips for creating a consistent vertical divider height between columns in bootstrap

I've encountered similar queries before, but the responses provided were not quite what I needed. While one answer came close to my desired outcome, it led to other complications that I am now facing. My main challenge is maintaining consistent vertical divider heights within columns of varying element counts.

https://i.sstatic.net/onL9E.png

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 most effective CSS approach I found was:

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

https://i.sstatic.net/sWC4u.png

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>

htmlcssbootstrap-4

Answer №1

To adjust the alignment of #subCategory, simply switch from flex-start to stretch.

#subCategories {
   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">
...
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to set distinct values for the input box using my color picker?

I have two different input boxes with unique ids and two different color picker palettes. My goal is to allow the user to select a color from each palette and have that color display in the corresponding input box. Currently, this functionality is partiall ...

javascripthtmljquerycss

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

htmlcssangular

The container is unable to contain the overflowing Slick carousel

The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...

htmlcssangularjssliderslick.js

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

cssreactjsmaterial-ui

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

Aligning thumbnail images in a jQuery Mobile listview

Hey, I recently added a list view that includes thumbnails. I used the following code: <ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d> <li><a href="image.php?imgid=2"> <img src="../images/comma. ...

jquerycssjquery-mobile

Style HTML in VSCode just like you do in Visual Studio

Trying to figure out how to configure VSCode to format HTML (and other markup files like .vue) in a similar way to Visual Studio. In Visual Studio, if I write something like: <div id="testid" class="test" style="display: block;"> <p class="p ...

htmlvue.jsvisual-studio-codeformat

In PHP, you can use the `echo` statement to output an HTML input

Incorporating HTML into PHP using heredoc methodology can sometimes lead to challenges when trying to retrieve user input variables. Attempting to access the input variable with $_GET["input"] may result in an error message indicating an undefined index: ...

javascriptphphtml

The div element is supposed to only be visible when the user scrolls down and then back up, rather than when the

Looking for some help with a Javascript issue on my website (http://www.pjsmusic.com). I need a div of 200px to appear when the user scrolls down 40px. I have tried using the following Javascript code: $(document).scroll(function() { $('#jerkBox& ...

javascripthtmlcssscroll

"Combining multiple attributes to target elements while excluding specific classes

My dilemma lies in the following selector that identifies all necessary elements along with an extra element containing the "formValue" class which I aim to omit $("[data-OriginalValue][data-OriginalValue!=''][data-TaskItemID]") ...

javascriptjqueryhtml

Tips for implementing a CSS class on a select dropdown in multiple web pages

Having multiple dropdowns (select boxes) on my website has led me to desire different alignments for them. For instance, I would like one dropdown to be centered on a specific page while another should appear on the right side of a separate page. Since my ...

css

Guide to modifying WordPress version 4.5 with HTML pages

https://i.sstatic.net/5zA5S.png I am encountering issues with my Wordpress website. I have installed it on Softcald in cPanel and now I want to edit my Wordpress using HTML. However, I am having trouble finding the editing option. My Wordpress version is ...

htmlcsswordpresscpanel

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

htmlcssangulartypescriptpaypal

Title slide on quarto featuring a captivating full coverage background image with a sleek row of icons at the bottom

I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I ha ...

cssrstudioquartoreveal.js

The functionality of CSS isn't up to snuff on Mozilla Firefox

I am having an issue with CSS styling on a <div> element in my PHP page. The CSS style is working perfectly in Google Chrome, but when I test my code in Firefox, the styling is not being applied. .due-money { background-color: #09C; color: whi ...

phphtmlcssfirefoxcross-browser

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

htmlcssbutton

Is there a way to link to a specific section within a webpage using its ID, landing halfway down the page instead of at the top?

Can someone help me out with this issue? The header on my page is fixed at the top and has a height of 75px. When I click on a link (<a href="/company/#contact/">contact</a>), it takes me to the right section but the top part is hidden behind t ...

javascriptjqueryhtmlcss

CSS - splitting the element in its current position (without going back to the start of the line)

In my e-commerce platform, I rely on pre-made solutions to help with changing the appearance without altering templates to avoid complications during updates. I am curious if there is a way to create a table effect without using standard CSS table styles ...

htmlcsslineline-breaks

Design and execution of webpage structure

My website features a single-page layout with fixed navigation that allows users to easily navigate up and down the page using #. However, when the page loads I want it to display the second section of content instead of the top section. Is there a way to ...

jqueryhtmlanchor