Bootstrap 5 Vertical Alignment
Last Updated : 04 Apr, 2024
Bootstrap 5 Vertical Alignment facilitates aligning inline, inline-block, inline-table, and table cell elements vertically within their container. It offers classes for top, bottom, middle alignment, and stretching content to fill vertical space, enhancing layout flexibility in web development.
Bootstrap 5 Vertical Alignment Classes:
| Class Name | Description |
|---|
| align-baseline | Aligns the baseline of the element with the baseline of its parent. |
| align-top | Aligns the top of the element with the top of the line. |
| align-middle | Aligns the middle of the element with the middle of the parent. |
| align-bottom | Aligns the bottom of the element with the bottom of the line. |
| align-text-bottom | Aligns the bottom of the element with the bottom of the parent element's text. |
| align-text-top | Aligns the top of the element with the top of the parent element's text. |
Syntax:
<span class="align-top">....</span>
Examples of Bootstrap 5 Vertical Alignment
Example 1: This example shows the use of vertical alignment classes to align span elements inside a paragraph.
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap 5 - JavaScript CDN --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> <!-- Bootstrap 5 - CSS CDN--> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container text-center"> <div class="my-4"> <h4>Bootstrap 5 Vertical Alignment</h4> </div> <p> <span class="align-top bg-info"> GeeksforGeeks </span> <span class="align-baseline bg-warning"> is a </span> <span class="align-middle bg-secondary"> Computer </span> <span class="align-bottom bg-primary"> Science </span> <span class="align-text-top bg-danger"> Portal </span> <span class="align-text-bottom bg-success"> for Geeks. </span> </p> </div> </body> </html>
Output:
Bootstrap 5 Vertical Alignment Example Output
Example 2: In this example, we show the use of the align-baseline, align-top, align-middle, and align-bottom classes using images.
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap 5 - JavaScript CDN --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> <!-- Bootstrap 5 - CSS CDN--> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container text-center"> <div class="my-4"> <h5>Bootstrap 5 Vertical Alignment Using with Table Cells</h5> </div> <table class="table w-50 m-auto"> <thead> <tr> <th class="align-top">Align Top</th> <th class="align-baseline">Align Baseline</th> <th class="align-middle">Align Middle</th> <th class="align-baseline">Align Bottom</th> </tr> </thead> <tbody> <tr style="height: 80px;"> <td class="align-top">Top</td> <td class="align-baseline">Baseline</td> <td class="align-middle">Middle</td> <td class="align-bottom">Bottom</td> </tr> </tbody> </table> </div> </body> </html>
Output:
Bootstrap 5 Vertical Alignment Using table Cell Example Output