Bootstrap center heading

Question

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?

Answer 1

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap has added three css classes for text align.

Answer 2

Just use class='text-center' in <h> element for center heading:

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

Use class='text-left' in <h> element for left heading, and use class='text-right' in <h> element for right heading.

Answer 3

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>

Answer 4

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;
    }

Answer 5

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