Menu
I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:
<div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div>...would produce centered text.
However, it still appears on the far left. What am I doing wrong?
784
Use d-flex justify-content-center on your column div. This will center everything inside that column. If you have text and image inside the column, you need to use d-flex justify-content-center and text-center . <div class="col text-center"> worked for me.
Add class . text-center to the parent div to align text or any item inside to the center. You can also decide how the alignment should look like on the specific screen sizes.
Why it works. Bootstrap works by providing a clean and uniform solution to the most common, everyday interface tasks developers come across. At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites.
Use class center-block to set an element to center.
For other types of content, see Flavien's answer.
Update: Bootstrap 2.3.0+ Answer
The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.
Original Answer (pre 2.3.0)
You need to define one of the two classes, row or span12 with a text-align: center. See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
