How To Place Table Text Into Center Using Bootstrap? - GeeksforGeeks

Trang chủ » Html Center Column In Table » How To Place Table Text Into Center Using Bootstrap? - GeeksforGeeks

Có thể bạn quan tâm

Centering table text using Bootstrap involves aligning the content of table cells to the center horizontally, enhancing the presentation and readability of data. This is achieved by using Bootstrap’s built-in classes like text-center, which apply CSS styles for quick and responsive text alignment within table elements.

There can be two ways:

Table of Content

  • By adding the text-center class of Bootstrap
  • Using Bootstrap’s d-flex and justify-content-center Classes

By adding the text-center class of Bootstrap

Using Bootstrap’s text-center class centers text horizontally within table cells. Simply add the `text-center` class to <td>, <th>, or <tr> elements to align their content centrally. This method provides an easy, responsive solution for centering text without custom CSS.

Syntax:

<td class="text-center">.......</td>

Example: In this example we use Bootstrap’s text-center class to center-align text within table cells. It displays a table with a person’s name and two contact numbers, each aligned centrally.

HTML <!DOCTYPE html> <html> <head> <title>adding the text-center class of Bootstrap </title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"> </script> <style> table, th, td{ border:1pxsolidblack; border-collapse:collapse; } </style> </head> <body> <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Contact Numbers</th> </tr> <tr> <td class="text-center">Pawan Kumar</td> <td class="text-center">1234567890</td> <td class="text-center">0987654321</td> </tr> </table> </body> </html>

Output:

Using Bootstrap’s d-flex and justify-content-center Classes

Using Flexbox with Bootstrap’s d-flex and justify-content-center classes centers text by making the table cell a flex container. The `d-flex` class enables Flexbox, and `justify-content-center` aligns the content horizontally, effectively centering the text within the cell.

<th class="d-flex justify-content-center">Name</th>

Example: In this example we use Bootstrap’s d-flex and justify-content-center classes to center-align content in a table’s header and cells, displaying names in a flexible, centered layout.

HTML <!DOCTYPE html> <html> <head> <title>Using Bootstrap's d-flex and justify-content-center Classes</title> <!-- Add Bootstrap CSS --> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <style> table, th, td{ border:1pxsolidblack; border-collapse:collapse; } td, th{ padding:5px; } </style> </head> <body> <table style="width:100%"> <tr> <th class="d-flex justify-content-center">Name</th> </tr> <tr> <td class="d-flex justify-content-center">Pawan Kumar</td> <td class="d-flex justify-content-center">Amit</td> <td class="d-flex justify-content-center">Rahul</td> </tr> </table> </body> </html>

Output:

BootTable

I

IshwarGupta Follow Improve Next Article How to Center the Text in Bootstrap ?

Từ khóa » Html Center Column In Table