Bootstrap 4 Align


Horizontal Align

Bootstrap has many text-align classes for aligning text. With them the text can be left, right, center side. Text align classes are .text-right, .text-left,.text-center.This is only possible horizontally.

.text-left

.text-center

.text-right


Text align left

This is a paragraph that has been added to the .text-left class.

Example Code

<p class="text-left">This is a paragraph that has been added to the .text-left class.</p>

Text align center

This is a paragraph that has been added to the .text-center class.

Example Code

<p class="text-center">This is a paragraph that has been added to the .text-center class.</p>

Text align right

This is a paragraph that has been added to the .text-right class.

Example Code

<p class="text-right">This is a paragraph that has been added to the .text-right class.</p>

Text align on HTML Element

.text-right heading

.text-right paragraph

Example Code

<div class="text-right">
<button class="btn btn-primary">.text-right button</button>
<h4>.text-right heading</h4>
<p>.text-right paragraph</p>
<input type="text" class="form-control w-50 d-inline-block" placeholder=".text-right input element" name="">
</div>

Center Align

Center an element with the .mx-auto class (adds margin-left and margin-right: auto):

Centered

Example Code

<div class="mx-auto bg-primary text-white" style="width:100px">Centered</div>

Vertical Align

Use align-class to change the alignment of elements in Bootstrap (works only on inline, inline-block, inline-table and table-cell elements):

.align-baseline .align-top .align-middle .align-bottom .align-text-top .align-text-bottom

Example code

<span class="align-baseline d-inline">.align-baseline</span>
<span class="align-top d-inline">.align-top</span>
<span class="align-middle d-inline">.align-middle</span>
<span class="align-bottom d-inline">.align-bottom</span>
<span class="align-text-top d-inline">.align-text-top</span>
<span class="align-text-bottom d-inline">.align-text-bottom</span>