Vertical alignment in Bootstrap with Examples

15 Jul, 2021
Vertical Alignment in bootstrap changes the alignment of elements vertically with the help vertical-alignment utilities. The vertical-align utilities only affects inline(Present in one Line), inline-block(Present as blocks in one line), inline-table, and table cell(Elements in a cell of a table) elements.Various classes available in bootstrap library that are used for vertical alignment are:  
.align-baseline
.align-top
.align-middle
.align-bottom
.align-text-bottom
.align-text-top
Below examples illustrate the vertical alignment classes in Bootstrap:Example 1: With Inline Elements  
html
<!-- BootStrap Vertical alignment classes    for inline elements --> <!DOCTYPE html><html><head>    <title>GeeksForGeeks</title>    <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">        <h1>Vertical Align</h1>         <p>            Change the alignment of elements            with the align classes (only works            on inline, inline-block,            inline-table and table            cell elements):        </p>         <span class="align-baseline">Hello</span>        <span class="align-top">This</span>        <span class="align-middle">is</span>        <span class="align-bottom">Geeks</span>        <span class="align-text-top">for</span>        <span class="align-text-bottom">Geeks</span>    </div></body></html>
Output:  
Example 2: With Table Cells.  
html
<html><head>    <title>GeeksForGeeks</title>    <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">        <table class='table table-striped table-bordered'               style="height: 100px;">            <tbody>                <tr>                    <td class="align-baseline">                        Hello                    </td>                    <td class="align-top">                        This                    </td>                    <td class="align-middle">                        is                    </td>                    <td class="align-bottom">                        Geeks                    </td>                    <td class="align-text-top">                        for                    </td>                    <td class="align-text-bottom">                        Geeks                    </td>                </tr>             </tbody>        </table>    </div></body></html>
Output:  
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Reference: https://getbootstrap.com/docs/4.1/utilities/vertical-align/ 
ysachin2314
Picked
Technical Scripter 2018
Bootstrap
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?