Equal Height Columns with Centered Content in Flexbox

Equal height columns with centered content in flexbox

The key to this layout is to apply equal heights to the primary flex container.

Then make the flex items nested flex containers, which can center the content of the flex items.

Hence, the top level creates the equal height. The second level does the centering.

(See the note at the bottom for more details.)

Here's an example based on your code structure:

body {    height: 300px;             /* for demo purposes */    color: white;}
flex-container {    display: flex;             /* primary flex container */    flex-direction: row;       /* horizontal alignment of flex items                                      (default value; can be omitted) */    align-items: stretch;      /* will apply equal heights to flex items                                      (default value; can be omitted) */    height: 100%;}
flex-item {    display: flex;             /* nested flex container */    flex-direction: column;    /* vertical alignment of flex items */    justify-content: center;   /* center flex items vertically */    align-items: center;       /* center flex items horizontally */}
flex-item:first-child {    flex: 3;                   /* consume 3x more free space than sibling */    background-color: #a333c8;}
flex-item:last-child {    flex: 1;    background-color: #db2828;}

<flex-container>    <flex-item><!-- also flex container -->        <p>Text Text Text</p>        <p>Text Text Text</p>        <p>Text Text Text</p>        <p>Text Text Text</p>    </flex-item>    <flex-item><!-- also flex container -->        <div>Forward</div>    </flex-item></flex-container>

Flexbox Equal Height Column

You would add align-items: stretch to .col-container. This will stretch all columns to fill the height of the parent.

This is a good reference for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bootstrap 4 - equal col height when using align-items-center

The problem is you want to center align the content of the column, not the column itself. You can make the blue-col a flexbox column (d-flex flex-column) and then use justify-content-center to align its' contents...

<div class="container">
    <div class="row yellow-row">
        <div class="col-lg-7 blue-col text-center d-flex flex-column justify-content-center">
            <h1>Testing</h1>
            <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
                    quasi</p>
        </div>
        <div class="col-lg-5 text-center">
            <h1>Only a test</h1>
            <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
            <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/kSvLCODvZC

---

Related: Equal height columns + vertical and horizontal centered content in Bootstrap 4

Equal height of flex columns

You need 2 flex containers if you want to solve it with flexbox.

1. Add a container for all the columns. In you picture you have 3 columns and as such you need to add 3 columns within that container.

2. Add the boxes for the matches within another flex-container. Apply flex-direction: column to align them below each other.

3. Apply justify-content: space-around; to align them as intended.

body {
  display: flex;
  justify-content: space-between;
}

.column-flex {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* for demonstration purpose only */
.column-flex {
  row-gap: 10px;
}

.column-flex > div {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4em;
}

<div class="column-flex">
  <div>Quarter Finals 1</div>
  <div>Quarter Finals 2</div>
  <div>Quarter Finals 3</div>
  <div>Quarter Finals 4</div>
</div>
<div class="column-flex">
  <div>Semi Finals 1</div>
  <div>Semi Finals 2</div>
</div>
<div class="column-flex">
  <div>Finals</div>
</div>

Bootstrap 4 columns center vertically and keeping same height

You can do this:

1. Remove align-items-center class from your row element

2. Add align-items-center and d-flex classes to each of your .why-choose-warranty .row div or add this to the style:

   display: flex;
   align-items: center;
   

See demo 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>

How to make flexbox items equal height and/or start at the same point

Aligning adjacent flexbox containers may not be possible - CSS Grid might be a good choice:

• use display: contents on the card or remove the wrapper altogether

• use a 2-column grid and place the card-title to the first row using grid-row: 1

• place the card-paragraph to the thrid row using grid-row: 3 and place the hr in between using grid-row: 2.

See demo below:

body {  max-width: 1180px;  margin: 0 auto;}
h2,p {  margin: 0;  padding: 0;}
h2 {  font-size: 18px;}
.cards {  /* display: flex; */  display: grid;  grid-template-columns: 1fr 1fr;}
.card {  /* border: 1px solid;  display: flex;  flex-direction: column;  margin: 0 0 25px 0;  width: 50%;*/  display: contents; /* added */}
.card-title {  text-transform: uppercase;  text-align: center;  /* margin: 0 0 25px 0;*/  grid-row: 1; /* added */  border: 1px solid;  /* added */}
.card-paragraph {  text-align: center;  grid-row: 3; /* added */  border: 1px solid;  /* added */}
hr {  height: 3px;  /* width: 100%; */  background: #333;  margin: 0; /* added */  grid-row: 2; /* added */}

<div class="cards">    <div class="card">      <div class="card-title">        Title one IS LONGER THAN TITLE TWO      </div>      <hr>      <div class="card-paragraph">        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.      </div>    </div>    <div class="card">      <div class="card-title">        TITLE TWO      </div>      <hr>      <div class="card-paragraph">        Lorem Ipsum is simply dummy text of the printing and typesetting industry.      </div>    </div>  </div>

Give equal height to children of elements within a flex container

The flex properties on the parent container (container in your example) don't pass down to the child elements, even if they are also containers. Therefore you also need to make the col divs display:flex, as follows:

.col  {
    flex: 1;
    display: flex;           /* make this a flex container so it has flex properties */
    justify-content: center; /* to horizontally center them in this flex display */
    /* REST OF YOUR CSS HERE */ 
}

Note that you also need to add flex: 1; to the content itself so it doesn't shrink, e.g.:

.col-item {
    flex: 1;
    /* REST OF YOUR CSS HERE */ 
}

Working Example with your code:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.col {
  flex: 1;
  background: orange;
  margin: 1px;
  display: flex;
  justify-content: center;
}

.col-item {
  flex: 1;
  margin: 15px;
}

<html>

<body>
  <div class="container">
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 1</h2>
        <p>Hello World</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 3</h2>
        <p>Some other text..</p>
        <p>Some other text..</p>
      </div>
    </div>
  </div>
</body>

</html>

Equal Height Columns - Flexbox & flex-wrap: wrap

You have no heights defined anywhere in your code. Therefore, there is no reason for your text blocks to have equal height. Their height is defined by the content, which is a default setting (height: auto).

You need to define a height somewhere in your layout, whether high up on the body element or on a container element closer to the text. You can then establish equal heights and use flex properties for vertical and horizontal alignment.

---

Related Topics