Bootstrap 5 Vertical Alignment
Bootstrap 5 Vertical alignment classes provided by Bootstrap 5 are used to align inline, inline-block, inline-table, and table cell elements vertically.
Bootstrap 5 Vertical Alignment Classes:
- align-baseline: This class is used to align the baseline of the element with the baseline of its parent.
- align-top: This class is used to align the top of the element with the top of the line.
- align-middle: This class is used to align the middle of the element with the middle of the parent.
- align-bottom: This class is used to align the bottom of the element with the bottom of the line.
- align-text-bottom: This class is used to align the bottom of the element with the bottom of the parent element’s text.
- align-text-top: This class is used to align the top of the element with the top of the parent element’s text.
Syntax:
<span class="align-top">....</span>
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= </script> <!-- Bootstrap 5 - CSS CDN--> <link href= rel="stylesheet" /></head><body> <div class="container text-center"> <div class="my-4"> <h3 class="text-success">GeeksforGeeks</h3> <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 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= </script> <!-- Bootstrap 5 - CSS CDN--> <link href= rel="stylesheet" /></head> <body> <div class="container text-center"> <div class="my-4"> <h3 class="text-success">GeeksforGeeks</h3> <h4>Bootstrap 5 Vertical Alignment</h4> <h5>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
Reference: https://getbootstrap.com/docs/5.2/utilities/vertical-align/
Please Login to comment...