Bootstrap 5 Table Vertical alignment
Bootstrap Tables are this is useful to make tables and charts and it has a lot of customizable options and utilities thanks to the Bootstrap predefined styles. Bootstrap provides us with functionality that helps us to vertically align these table cells’ contents. By default, the contents of a table cell are always aligned to the top until customized. To customize this vertical alignment we have to use the Vertical Alignment classes.
Prerequisite: Bootstrap 5 Tables, Bootstrap 5 Vertical Alignment.
Bootstrap 5 Table Vertical alignment Used classes: No special table class is used to implement this design, you have to use the Vertical Alignment classes to add this feature.
Syntax:
<table class="table [align-middle/bottom/top]">
<thead>
...
</thead>
<tbody>
<tr class="align-bottom">
<td class="align-top">
...
</td>
<td>...</td>
</tr>
</tbody>
</table>
Example 1: The code example below demonstrates how we can add vertical alignment to a table and how it stays intact responsively:
HTML
<!doctype html><html lang="en"><head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script></head><body> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="m-4"> Bootstrap 5 Table Vertical alignment </h4> <div class="table-responsive bg-dark container"> <table class="table align-bottom text-light"> <thead> <tr> <td>Subject</td> <td>Category</td> <td>Description</td> </tr> </thead> <tbody> <tr class="align-middle"> <td>Algorithms</td> <td>CS Fundamentals</td> <td> The word Algorithm means ” A set of rules to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently by recursive operations “. </td> </tr> <tr class="align-top"> <td>Bootstrap</td> <td>Web technologies</td> <td> Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. </td> </tr> </tbody> </table> </div></body></html> |
Output:
Bootstrap 5 Table Vertical alignment
Example 2: The code demonstrates how we can vertically align the items in a hoverable table:
HTML
<!doctype html><html lang="en"><head> <link href= rel="stylesheet"> <script src= </script></head><body> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="m-4"> Bootstrap 5 Table Vertical alignment </h4> <div class="table-responsive bg-success container"> <table class="table align-middle text-light table-hover"> <thead> <tr> <td>Language</td> <td>Category</td> <td>Description</td> </tr> </thead> <tbody> <tr class="align-top"> <td>CSS</td> <td>Stylesheet Language</td> <td> CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. </td> </tr> <tr class="align-bottom"> <td>Bootstrap</td> <td>Web Framework</td> <td> Bootstrap is a free and open -source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework. </td> </tr> </tbody> </table> </div></body></html> |
Output:
Bootstrap 5 Table Vertical alignment
Reference: https://getbootstrap.com/docs/5.0/content/tables/#vertical-alignment
Please Login to comment...