[twitter-bootstrap] Bootstrap center heading

It is my first Twitter Bootstrap experience. I have added some headings (h1, h2, etc.) and they are aligned by left side. What is the right way to center headings?

This question is related to twitter-bootstrap

The answer is


just use class='text-center' in element for center heading.

<h2 class="text-center">sample center heading</h2>

use class='text-left' in element for left heading, and use class='text-right' in element for right heading.


Per your comments, to center all headings all you have to do is add text-align:center to all of them at the same time, like so:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

Bootstrap comes with many pre-build classes and one of them is class="text-left". Please call this class whenever needed. :-)


Just use "justify-content-center" in the row's class attribute.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>