Bootstrap Vertical Align Explained With Example

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. What we need is to assign the bootstrap class to the HTML tag, which we want to align as per the requirement.

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.

Let’s consider the following example in which different alignment classes are explained:

Example 1

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

Step 1:

We first add the following bootstrap links in our code to use bootstrap classes directly.

<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>

Code:

<!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:

bootstrap vertical align text

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 cells of the table.

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:

bootstrap vertical align text

 

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 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.

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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
php array foreach loop
What Is the PHP Array Foreach Loop and How It Is Different From for Loop

In PHP language, there are different types of arrays like an indexed array, associative array, and multidimensional array. We use...

Close