Bootstrap

How to Vertical Align Elements Using Bootstrap

Generally, Bootstrap is used for minimizing developers’ code and directly use the predefined classes of its file. Sometimes we need to change the position of text or image vertically. We can do this by assigning CSS classes to that element.

But Bootstrap provides predefined classes for text or images vertically in the HTML pages. We need to assign the bootstrap class to the HTML tag, which we want to align as per the requirement.

Bootstrap Vertical Align (Middle)

There are different classes that we can use to align text or image vertically. They are as follows:

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

We can use the above classes to align text and images at different positions of the HTML page.

Note: Bootstrap vertical-align classes affect only the following elements.

Inline: it means text or image present in one line
Inline-block: it means text or image present as a block in one line
Table-cell: it means text present in a cell of the table.

Read Also: How to Create a Responsive Table Using CSS, Bootstrap

Bootstrap 4 Vertical Align Text Classes

Let’s consider the following example in which different alignment classes are explained to align text.

Example 1

Suppose we have an inline text “Hello Welcome to our website Errorsea,” and we can align words to varying positions as below.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<h2>Vertical Align of text</h2>
<p>
Change the alignment of elements
with the align classes
</p>
<span class="align-baseline">Hello</span>
<span class="align-top">Welcome</span>
<span class="align-middle">to</span>
<span class="align-bottom">our</span>
<span class="align-text-top">website</span>
<span class="align-text-bottom">Errorsea</span>

</div>
</body>
</html>

Output

Explanation

In the above code first, we add bootstrap links.
Then we assign the align-baseline class to text Hello.
Then we assign the align-top class to text Welcome.
Then we assign the align-middle class to text to.
Then we assign the align-bottom class to text our.
Then we assign the align-text-top class to the text website.
Then we assign the align-text-bottom class to text Errorsea.
And finally, we get the output as shown in the above figure.

Also Read: How to Center a Div Tag With CSS?

Example 2

Suppose we have a table containing the words of the text “Hello Welcome to our website Errorsea” in different table cells.

We can align words at different positions as below.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<h2>Vertical Align of text</h2>
<p>
Change the alignment of elements
with the align classes
</p>
<table class='table table-striped table-bordered'
style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">
Hello
</td>
<td class="align-top">
Welcome
</td>
<td class="align-middle">
to
</td>
<td class="align-bottom">
our
</td>
<td class="align-text-top">
website
</td>
<td class="align-text-bottom">
Errorsea
</td>
</tr>
</tbody>
</table>

</div>
</body>
</html>

Output

Explanation

In the above code first, we add bootstrap links.
Then we assign the align-baseline class to the table cell. Hello.
Then we assign the align-top class to table cell Welcome.
Then we assign the align-middle class to the table cell to.
Then we assign the align-bottom class to table cell our.
Then we assign the align-text-top class to the table cell website.
Then we assign the align-text-bottom class to table cell Errorsea.
And finally, we get the output as shown in the above figure.

Read Also: How to Create Pagination using jQuery and Bootstrap

Conclusion

This is all about the vertical-align method of Bootstrap. We can use them differently according to our requirements.
I hope you found this post fully informative and helpful.
Thank you for reading 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.