Center DIV + Text in Bootstrap Columns

Question

I've been trying to figure out, how to veritical align the content in my bootstrap grid.

I have 3 col-md-4 columns and I wanna center another div + test inside of them.

This is how it looks right now:

https://i.stack.imgur.com/EP8ur.png

How it actually should look: https://i.stack.imgur.com/8MAqv.png

Just everything centered.

I already searched for a few solutions, but none of them really worked out for me.

Thats my HTML:

            <div class="col-md-4 my-auto">
              <div><p>TEST</p></div>
              <p>This is an example</p>
            </div>
            <div class="col-md-4">
              <div><p>TEST2</p></div>
              <p>This is an example</p>
            </div>
            <div class="col-md-4">
              <div><p>TEST3</p></div>
              <p>This is an example</p>
            </div>
        </div>

Since I wasn't successful with the CSS Part, I don't think that there's an actual matter of showing it, but anyway:

I tried out this:

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

As well as this:

.vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

And a few other codes, but yeah.. unsuccessfully.

Can you add your code briefly. Code which you mentioned is not enough. — Praveen, Apr 17 '19 at 10:13

score 1 · Answer 1 · edited Apr 17 '19 at 11:21

I have used Bootstrap Flexbox here, hope this solves your issue

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4 d-inline-flex justify-content-center align-items-center my-auto">
    <div>
      <p>TEST</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 d-inline-flex justify-content-center align-items-center">
    <div> 
      <p>TEST2</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 d-inline-flex justify-content-center align-items-center">
    <div>
      <p>TEST3</p>
    </div>
    <p>This is an example</p>
  </div>
</div>

score 1 · Accepted Answer · answered Apr 17 '19 at 10:20

used flexbox to achieve it

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.content-block {
  display: flex;
  justify-content: space-between;
}

.content {
  display: flex;
  flex-direction: column;
}

.content .tag p {
  text-align: center;
  background: red;
  padding: 10px;
  color: white;
  border-radius: 10px;
}


}

<div class="content-block">
  <div class="col-md-4 my-auto content">
    <div class="tag">
      <p>TEST</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 content">
    <div class="tag">
      <p>TEST2</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 content">
    <div class="tag">
      <p>TEST3</p>
    </div>
    <p>This is an example</p>
  </div>
</div>

Center DIV + Text in Bootstrap Columns

2 Answers2