How to Use Vertical Align in Bootstrap

.align-items-center {  display: flex;   align-items: center;  /*Aligns vertically center */  justify-content: center; /*Aligns horizontally center */}

<div class="col-md-4">  <div class="align-items-center" style="background:red; width: 350px; height: 225px;">    <h3 class="text-center" style="">Hello</h3>  </div></div>

Bootstrap Center Vertical and Horizontal Alignment

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex).

Centering examples in Bootstrap 5

Vertical center (don't forget the parent must have a defined height!):

• my-auto for centering inside flex (.d-flex) elements
• my-auto can be used to center columns (.col-) inside row
• align-items-center to center columns (col-*) inside row

Horizontal center:

• text-center to center display:inline elements & column content
• mx-auto for centering inside flex elements
• mx-auto can be used to center columns (.col-) inside row
• justify-content-center to center columns (col-*) inside row

---

Bootstrap 4.3+ (Update 2019)

There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...

Vertical center:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

the height of the container with the item(s) to center should be 100%
(or whatever the desired height is relative to the centered item)

Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.

Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.

---

Horizontal center:

• text-center to center display:inline elements & column content
• mx-auto for centering inside flex elements
• offset-* or mx-auto can be used to center columns (.col-)
• justify-content-center to center columns (col-*) inside row

---

Vertical Align Center in Bootstrap

Bootstrap 4 full-screen centered form

Bootstrap 4 center input group

Bootstrap 4 horizontal + vertical center full screen

Vertical align DIV & Text in Bootstrap 4

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%;
}

Vertical alignment in Bootstrap 4

You can use the flex-xs-middle class like this..

Bootstrap 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 (Using the Bootstrap 4 flexbox enabled CSS)

Bootstrap 4

---

UPDATE for Bootstrap 4.0.0

Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utils along with vertical align utils. At first "vertical align utils" seems obvious but these only work with inline and table display elements. Below are the Bootstrap 4 vertical centering options. Remember, vertical alignment is relative to parent height.

---

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

---

2 - Vertical Center with Flexbox:

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

Important: The direct parent of the element to be aligned must have a defined height!

---

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

Vertical alignment in bootstrap 4

Just use my-auto for vertical center...

  <div class="card">
        <img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
        <div class="card-img-overlay d-flex">
            <div class="my-auto mx-auto text-center">
                <h4 class="card-title">Animal Farm</h4>
                <h6 class="text">George Orwell</h6>
                <p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
            </div>
        </div>
  </div>

http://codeply.com/go/ZQM4ANFcXC

align-middle will work on display: table or display: inline elements.

Also see this similar question

How to center div vertically in Bootstrap 4?

If you want to vertically center those elements set the height and width of html and body to 100%. Setting width & height to 100% makes an element take on the height of it's parent.

Next, set all the child elements accordingly. In bootstrap width: 100% is w-100 and height:100% is h-100. Also, bootstrap uses a 12 column layout so change your class from col-md-4 to col-md-6

Note: you could add w-100 and h-100 to html and body in your code for the same effect.

<style>
    html,body{
      width:100%;
      margin:0;
        height:100%;
    }
</style>

<div class="container w-100 h-100">
    <div class="row align-items-center h-100">
      <div class="col-md-6">
        <h1 class="alert alert-primary">Vertical</h1>
      </div>
      <div class="col-md-6">
        <h1 class="alert alert-success">Vertical</h1>
      </div>
    </div>
  </div>

Vertical alignment of columns in bootstrap 4

Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs. But here in your example you haven't used row class or d-flex class in your code.

I suggest you to add row into your code..

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
  </div>
</div>

Now your code will center the text vertically, But within the container height. It won't be center to your html page.

Vertical Center: JS Fiddle

To make Your text to center of your page, make row div to full height 100vh

---

Related Topics