How to vertically center Bootstrap 4 columns while maintaining uniform height

Having trouble with aligning bootstrap 4 columns' height and vertical alignment? Check out this JSFiddle to see the issue.

I'm working on designing a layout with items in both desktop and mobile views, all within borders.

The challenge lies in maintaining the columns' height while vertically centering their content. Despite trying classes like align-items-center, I can't seem to achieve both centered content and consistent column heights without compromising the border layout.

I also attempted using my-auto and align-self-center classes but to no avail.

.why-choose-warranty {
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}

... (CSS code continues) ...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="why-choose-warranty">
  ... (HTML code continues) ...

Seeking help from those who have encountered or solved this problem before. Any suggestions are greatly appreciated!

Thank you for your assistance.

htmlcssflexboxbootstrap-4

Answer №1

Make the following changes:

  • <div class="row col-12 col-lg-10 m-auto d-flex">

Add d-flex align-items-center to

  • <div class="col-4 col-lg-2 d-flex align-items-center">

Check out the updated fiddle

.why-choose-warranty{
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}
.why-choose-warranty .row{
  padding: 1rem;
}
.why-choose-warranty .row div{
  justify-content: center;
}

/* Small screens (mobiles) */
@media screen and (max-width: 992px){
  .why-choose-warranty .row{
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img{
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1), .why-choose-warranty .row div:nth-child(2){
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3){
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4), .why-choose-warranty .row div:nth-child(5){
    border-right: 1px solid #d7d5d1;
  }
}

/* Big screens (desktops) */
@media screen and (min-width: 992px){
  .why-choose-warranty img{
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div{
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child{
    border-right: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto d-flex">
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">Test
        <br />
        <br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST
        <br />
        <br />
        <br />
        <br />
        <br />TEST</p>
    </div>
    <div class="col-4 col-lg-2 d-flex align-items-center">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

Answer №2

Here's a solution for your issue:

  1. Delete the align-items-center class from the row element.

  2. Add both align-items-center and d-flex classes to every .why-choose-warranty .row div or insert this style:

    display: flex;
align-items: center;

View the example below:

.why-choose-warranty {
  width: 100%;
  height: 100%;
  background-color: #f5f3ef;
  color: #11155e;
  padding: 1rem;
}

.why-choose-warranty .row {
  padding: 1rem;
}

.why-choose-warranty .row div {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Small screens (mobiles) */

@media screen and (max-width: 992px) {
  .why-choose-warranty .row {
    background-color: white;
    border-radius: .5rem;
  }
  .why-choose-warranty img {
    max-width: 40%;
    max-height: 40%;
  }
  .why-choose-warranty .row div:nth-child(1),
  .why-choose-warranty .row div:nth-child(2) {
    border-right: 1px solid #d7d5d1;
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(3) {
    border-bottom: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:nth-child(4),
  .why-choose-warranty .row div:nth-child(5) {
    border-right: 1px solid #d7d5d1;
  }
}


/* Big screens (desktops) */

@media screen and (min-width: 992px) {
  .why-choose-warranty img {
    max-width: 60%;
    max-height: 60%;
  }
  .why-choose-warranty .row div {
    border-right: 1px solid #d7d5d1;
  }
  .why-choose-warranty .row div:last-child {
    border-right: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="why-choose-warranty">
  <div class="row col-12 col-lg-10 m-auto">
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>
    </div>
    <div class="col-4 col-lg-2">
      <p class="text-center font-weight-bold">TEST</p>
    </div>
  </div>
</div>

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

Content that is dynamically generated by a database

I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...

javascriptphpjqueryhtmlfacebook

Storing Form Data in MySQL, upon clicking the submit button the user is redirected to a PHP page and the information is not

Currently, I am facing an issue with injecting data into my SQL table. Whenever I input information into the forms and click on the submit button, the page redirects me to my PHP file without actually injecting any data. The tables remain empty. Below is ...

phpjqueryhtmlmysqlforms

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...

htmlcss

Display column header row divider for pinned columns in v5 DataGrid

I'm attempting to customize the appearance of pinned columns in MUI's DataGrid by adding a column header-row divider. The official demo by MUI for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx] displays the pinned column header ...

cssreactjsmaterial-ui

What is the best way to generate a fresh JSON object within a react hook function?

I am currently facing two issues. Firstly, I am having trouble figuring out how to add/update the JSON items within a hook. Secondly, React seems to be restricting me from using the name that is stored in a previous JSON file. I am open to exploring alter ...

javascripthtmljsonreactjsreact-hooks

Utilizing the JQuery .on() method for handling events on dynamically loaded images

My website's pages are dynamically generated through ajax responses. Each response includes an img element with a specific id. I want these images to fade in when they load. Using .load() and .bind('load') works perfectly the first time th ...

jqueryhtmlajax

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

I'm facing an issue with my table where I have inputs and selects inside <td>. The problem arises when the text in the options of the <select> element is too long, causing the <td> to expand and disrupt the overall layout of the tabl ...

htmlangularjscsssass

Move items between unordered lists with automatic saving

As someone who is new to javascripting and php, I am looking to create multiple lists where I can easily drag and drop items between them. The specific order of the items within each list is not crucial as I will be able to adjust it using SORT BY. While ...

phpjqueryhtmldrag-and-dropautosave

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

javascriptjqueryhtmlcss

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

jquerycsshtmlcenter

Comparing scrollIntoView and moveToElement functions

When working with Selenium WebDriver, there are two primary methods to ensure an element is within the visible area: Scrolling into view: ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element); Using moveToElemen ...

javascriptjavahtmlseleniumselenium-webdriver

Issue with uploading files on remote server using PHP

Below is the code I am currently using: <form action="index.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file"><br><br> <input type="submit" value="submit" name="submit"> </form> ...

phphtmlfile-upload

What is the method for ensuring that the delete functionality is displayed within the same row?

In my division, there are options for names and deletion. It is displayed on my website as: 1.jpg delete The HTML code for the division is: <div id="files1" class="files"> <b class='dataname' >1.jpg</b> <span cla ...

javascriptjqueryhtmlcss

Which selector in CSS is applicable for targeting Bootstrap tooltips?

After some experimentation, I've mastered the functionality of Twitter Bootstrap Tooltips and am now focused on customizing their appearance. Previous inquiries into other plugins revealed specific CSS selectors - for example, jScrollPane had a track ...

csstwitter-bootstrapcss-selectorstwitter-bootstrap-3

Creating a sliding bottom border effect with CSS when clicked

Is there a way to animate the sliding of the bottom border of a menu item when clicked on? Check out the code below: HTML - <div class="menu"> <div class="menu-item active">menu 1</div> <div class="menu-item">menu 2</ ...

javascriptjqueryhtmlcss

Providing an Object as the Output of an Event Handler, in cases where the data cannot be transformed into another format

My goal is to have the second dropdown menu, labeled Item, dynamically update when a category is selected from the first dropdown menu, labeled Type. If I could access the array I created within the change event, I could easily populate the second dropdow ...

javascriptjqueryhtml

How can I modify the appearance and behavior of an HTML button?

I simply need to update the button class and value in order to change the button's functionality. After successfully changing the value and class, the functionality remains the same as the old class. Why is this happening? Could it be that the brows ...

phpjqueryajaxhtml

Tips for properly showcasing images on a webpage after ensuring all other content has loaded

Is there a way to have an image load last on a webpage after all other content has been loaded? I have an image that is retrieved from a database when a button is pressed, but I would prefer for the entire page to load first and then display the image. C ...

javascriptjqueryhtmlcss

Python Script for Scanning a Website for a Specific Tag

Currently, I am exploring the process of creating a website monitoring script (which will eventually be set up as a cron job) that can access a specified URL, verify the presence of a specific tag. If the tag is not found or does not contain the expected i ...

pythonhtmllinuxscriptingcron

Adding an <a> tag to Flickity: Step by step guide

Is there a way to incorporate tags into a Flickity image slider without affecting its functionality? Here's the code snippet I have for the slider: <div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "auto ...

javascripthtmlflickity