CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxbootstrap-4
Elaine Byene
Elaine Byene

Reputation: 4142

Vertical align DIV & Text in Bootstrap 4

I have gone through many questions here as well as many articles and bootstrap 4 documentation but failed to find what I'm looking for.

DEMO: https://jsfiddle.net/zxLLqsm0/

I'm looking to create boxes with exact same height for all columns and also vertically center align the text inside the boxes. I managed to get the text vertically aligned but the heights of the boxes are different.

Here's my HTML

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <div class="box">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

And my CSS:

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}

Upvotes: 6

Views: 18532

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362380

Basically, this question has already been answered.

Use flexbox and justify-content-center to make the box centered, and h-100 for height:100%...

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

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

Or, if you want to apply the same changes to .box instead of using the Bootstrap classes...

https://jsfiddle.net/g38e9Lfm/

.box {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

Upvotes: 15

Denis Potapov
Denis Potapov

Reputation: 694

You can add standard bootstrap classes and do not write extra css

 <div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 1</h6>
          <p>A small description</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 2</h6>
          <p>A bigger description goes here</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 3</h6>
          <p>A large description is placed here to make whatever changes we need.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Demo

Upvotes: 3

Ivan Iyari
Ivan Iyari

Reputation: 72

Change the class align-item-center for row-eq-height more info: http://getbootstrap.com.vn/examples/equal-height-columns/

For understand check: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And if want vertically center align can use the next code:

    .box {
      background-color: grey;
      padding: 15px;
      height: 100%;
      display: flex;
      flex-wrap:wrap;
      align-items: center;
      align-content:center;
      text-align:center;
      justify-content: center;
    }

Upvotes: 0

Ash
Ash

Reputation: 473

Here is an approach, hope it will help you.

.box{
  background-color: grey;
  padding: 15px;
  height: 200px; 
  display:table;
}

Wrap up your text part under a new div with class = "text", then add css

.text{
display:table-cell;
vertical-align:middle;
}

Upvotes: 0

Related Questions