PUBLISHED ON: AUGUST 9, 2021
How to align text inside a Table using Bootstrap classes?
Tables are widely used while creating web pages. Tables are used for constructing calendars, comparisons of any data, date pickers, etc. Bootstrap provides an easy way to create and modify Tables.
By default table, contents are aligned to the left. Let's see the examples.
Default Table Text alignment
To create a table, add .table class to <table> tag. Add header elements using <th> tag. The <thead> tag denotes the head of the table. For adding contents use <td> tag. <tr> tag denotes the row of table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item</th>
<th scope="col">Available</th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Any item</td>
<td>No</td>
<td>Active</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Any item 2</td>
<td>Yes</td>
<td>Disable</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Any item 3</td>
<td>No </td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Bootstrap classes used to align text inside Table
The text utility classes can be used to align the text inside the table. The classes can be used with <th> to align the heading text. To align the text in the table cell, use the text alignment utility within <td> element. To align-left use .text-start class within <td> or <th> element.
To align to the right use .text-end class within each <td> and <th> element, and for center alignment use .text-center class.
In the example, we have used all three classes. Table headings text is aligned to the center, the first row to left and the second row to right.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table table-bordered justify-content-center">
<thead>
<tr>
<th class="text-center" scope="col">#</th>
<th class="text-center" scope="col">Item</th>
<th class="text-center" scope="col">Available</th>
<th class="text-center" scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-center" scope="row">1</th>
<td class="text-start">Any item</td>
<td class="text-start">No</td>
<td class="text-start">Active</td>
</tr>
<tr>
<th class="text-center" scope="row">2</th>
<td class="text-end">Any item 2</td>
<td class="text-end">Yes</td>
<td class="text-end">Disable</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
We can easily align text inside a table using bootstrap classes. It can be done using text alignment classes available in bootstrap 5.
