How to Center Content in Twitter Bootstrap?

How to Center Content using Twitter Bootstrap

In Twitter Bootstrap, you can achieve centered content through methods that vary depending on your specific requirements.

Centering Text

To align text in the center, you can apply the .text-center class to the parent container. This class, introduced in Bootstrap 2.3.0, allows for effortless text centering.

<div class="text-center">
  <h1>Bootstrap Starter Template</h1>
  <p>Example text.</p>
</div>

Notes:

• For text alignment options in older versions of Bootstrap (pre-2.3.0), you can add text-align: center to the .row or .span12 container.

Alternative Methods for Non-Text Content

For centering non-text elements (e.g., images or buttons), you have the following options:

• Margin: Add margin: 0 auto to the element, which creates equal margins on both sides.
• Float: Set float: none and then add margin: 0 auto to the parent container.
• Bootstrap Utility Classes: Utilize the .pull-left, .pull-right, and .center-block classes.
• Custom Styles: Define the centering rules in your own custom stylesheet.

Choose the method that best suits your specific needs and version of Bootstrap.

The above is the detailed content of How to Center Content in Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!