Bootstrap 4: align text in div vertically AND horizontally (with given div height)

Question

I'm trying to align text in a div vertically and horizontally at the same time. Some solutions I found worked, but only when the div didn't have to stretch to the height of the parent. After trying for quite some time to just get the vertical alignment, I somehow lost the horizontal alignment now.

I'm really lost how to make both alignments at the same time with bootstrap (and any additional CSS if needed).

JSFiddle: https://jsfiddle.net/j5xg39fb/47/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<div class="container">
  <div class="row" style="height: 100px;">
  
    <div class="col-sm text-center bg-dark" style="align-self: stretch; align-items: center; display: flex;" >
       <i class="fas fa-search"></i>
Suchen
    </div>
    <div class="col-sm text-center bg-info " style="align-self: stretch; align-items: center; display: flex;">
      <i class="far fa-hand-pointer"></i>
      Stylisten wählen
    </div>
    <div class="col-sm text-center bg-primary" style="align-self: stretch; align-items: center; display: flex;">
      <i class="far fa-calendar-alt"></i>
      Anfrage senden
    </div>
        <div class="col-sm text-center bg-warning" style="align-self: stretch; align-items: center; display: flex;">
      <i class="far fa-smile"></i>
      Verwöhnen lassen
    </div>
  </div>
</div>

see this post https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block — Umair Mubeen, Jul 26 '20 at 17:32

score 2 · Accepted Answer · answered Jul 26 '20 at 17:34

Well, you just need to use justify-content: center; instead of align-self: stretch;. Also, keep in mind when you using bootstrap there are build-in classes for flex and it's properties so you don't have to declare those manually as style. You can read more about them here.

So your final code should be something like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<div class="container">
  <div class="row" style="height: 100px;">
    <div class="col-sm text-center bg-dark d-flex align-items-center justify-content-center">
      <i class="fas fa-search"></i> Suchen
    </div>
    <div class="col-sm text-center bg-info d-flex align-items-center justify-content-center">
      <i class="far fa-hand-pointer"></i> Stylisten wählen
    </div>
    <div class="col-sm text-center bg-primary d-flex align-items-center justify-content-center">
      <i class="far fa-calendar-alt"></i> Anfrage senden
    </div>
    <div class="col-sm text-center bg-warning d-flex align-items-center justify-content-center">
      <i class="far fa-smile"></i> Verwöhnen lassen
    </div>
  </div>
</div>

Thanks a lot SMAKSS! I actually tried justify-content: center; before and it didn't work for some reason. But your solutions works perfectly! Thanks a lot for the quick help! Will mark as solved once I can by system! — AlphaX, Jul 26 '20 at 17:37

Bootstrap 4: align text in div vertically AND horizontally (with given div height)

1 Answers1