Bootstrap text centering tips

There are four ways to center text in Bootstrap: 1. Use the text alignment utility class (.text-center); 2. Set the text-align CSS attribute to "center"; 3. Use flexbox (justify-content: center; align-items: center;); 4. Use the Bootstrap grid system (.col-md-auto).

Bootstrap text centering tips

In Bootstrap, there are several ways to center text:

1. Text Alignment Utility Class

Use one of the following utility classes:

• .text-center : Center the text horizontally in the container.
• .text-center-sm : Center the text on the small screen horizontally.
• .text-center-lg : Center the text on the middle screen horizontally.
• .text-center-xl : Center the text on the large screen horizontally.

Example:

 <code class="html"><p class="text-center">居中文本</p></code>

2. CSS properties

You can center the text by setting text-align CSS property to "center":

Example:

 <code class="css">p { text-align: center; }</code>

3. flexbox

Using flexbox is also an effective way to center text:

Example:

 <code class="html"><div class="container"> <p style="justify-content: center; align-items: center;">居中文本</p> </div></code>

4. Bootstrap grid system

For elements in the grid, you can put them in a row and use the .col-md-auto class to automatically adjust their width, thus achieving text centering:

Example:

 <code class="html"><div class="row"> <div class="col-md-auto"> <p>居中文本</p> </div> </div></code>

The above is the detailed content of Bootstrap text centering tips. For more information, please follow other related articles on the PHP Chinese website!