Bootstrap 5 Table Vertical alignment
Last Updated :
03 Feb, 2023
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...