How to center align entire div content containing table in Bootstrap

This article explains in detail how to use Bootstrap 5's Flexbox tool class (such as `justify-content-center`) to accurately center the entire content including titles, paragraphs and tables, and solve the layout offset problem caused by the default left alignment of tables.

In Bootstrap layout, when a .row contains multiple .col-* columns (such as two col-md-6 in this example), and the row itself does not set the alignment, its sub-columns will be arranged from left to right according to the document flow - even if the parent container is wide enough, it will not be automatically centered horizontally. Especially when the right column contains a

✅ The correct solution: add the justify-content-center class to the .row that wraps the content
This class is based on CSS Flexbox's justify-content: center, which aligns all direct subcolumns (.col-*) as a whole on the main axis (horizontal direction), rather than just aligning the inner text.

 <!-- ✅ Recommended writing method: add justify-content-center on the target row -->
<div class="row justify-content-center">
  <div class="col-md-9 border-right border-bottom border-dark" id="OpenTime">
    <div class="row">
      <div class="col-md-6"> <!-- Content on the left-->
        <h1 style="font-family: Playfair Display;">Test Barbershop</h1>
        <p style="font-family: Quicksand; text-align: justify;">...</p>
      </div>
      <div class="col-md-6"> <!-- Contents with table on the right-->
        <h1>Opening hours</h1>
        <p>Hours could change...</p>
        <table class="table table-borderless mb-0"> <!-- It is recommended to improve readability-->
          <tr>
<td>Monday</td>
<td>9:30 – 18:30</td>
</tr>
          <tr>
<td>Tuesday</td>
<td>9:30 – 18:30</td>
</tr>
          <!-- More lines... -->
        </table>
      </div>
    </div>
  </div>
</div>

? Key considerations:

• justify-content-center must act on *.row`** that directly wraps `.col- , not on outer containers or deeper nested rows;
• Avoid mixing text-align: center (only affects inline content) and Flex centering. The two logics are different and may easily cause conflicts;
• The table itself does not need to be additionally centered (such as margin: 0 auto) because it is already centered with the column; if you need to fine-tune the alignment of cells in the table, you can use text-center (Bootstrap 5) or text-align: center;
• Responsive safety: justify-content-center takes effect at all breakpoints; if you need to center only on a specific screen size, you can use responsive variants such as justify-content-md-center (only ≥768px centered).

? Advanced tips:
If you want the table content to be uniformly right-aligned for the time column, you can add a text-end class (Bootstrap 5) or customize CSS for

 <tr>
<td class="fw-medium">Monday</td>
<td class="text-end">9:30 – 18:30</td>
</tr>

The above is the detailed content of How to center align entire div content containing table in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!