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?

Agateware

How are you containing the headings? Inside a container, like a p tag, or loose? – Calling

@AndresIlich, inside of row-fluide (which is inside container-fluide) – Agateware

are you looking to centering all headings? or just a select few? – Calling

@AndresIlich, I want to have all headings centered by default – Agateware

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.

Eward

bootstrap needs to make this more clear on the docs..( 150 likes and counting = poor docs. ) – Wilfredwilfreda

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.

Radiotransparent

I tried this and it didn't work for me. – Getz

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>

Brice

Why all this complexity? Is not <h1 class="text-center"> just more simple, as per the Sadegh-khan's answer? – Scoville

Using this allows the header to become centralised in the div when using bootstrap which using text-center didn't do. It makes the header appear in the middle of the screen which was what I was aiming for. – Belaud

This helps you to center de <tag> and not the text – Manon

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

Calling

While true, the idea behind using twitter bootstrap is to use the existing classes as far as possible. See the answer by Jinpu Hu – Ballerina

@Ballerina Frameworks function as suggestions towards what you can use in a project; They are by no means a given. While simpler to use the classes and styles already given in the bootstrap, if your project's requirements "require" you to make some drastic changes to the framework, per OP's question, than the simplest way to go about it is to just modify those changes at the root level. As opposed to adding a tonne of classes that you really don't need. – Calling

@Ballerina Furthermore, those alignment classes did not exist at the time of writing. This answer is a year old. – Calling

Answer 5

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

Roundup

Answer 6

In the current version of bootstrap 5.2.0 it is: text-center, (center) text-end, (right) text-start, (left).

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

Bacardi