121

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?

Zuhair Naqi
  • 1,162
  • 11
  • 21
SiberianGuy
  • 24,674
  • 56
  • 152
  • 266

6 Answers6

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

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

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

bootstrap has added three css classes for text align.

elena
  • 3,740
  • 5
  • 27
  • 38
Jinpu Hu
  • 1,674
  • 1
  • 11
  • 2
  • 1
    bootstrap needs to make this more clear on the docs..( 150 likes and counting = poor docs. ) – Glen Nov 15 '21 at 17:50
105

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.

nik7
  • 806
  • 3
  • 12
  • 20
Sadegh-khan
  • 2,535
  • 1
  • 20
  • 30
41

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>
goodjuju
  • 411
  • 4
  • 5
  • 2
    Why all this complexity? Is not `

    ` just more simple, as per the [Sadegh-khan's answer](https://stackoverflow.com/a/37379471/1763602)?

     – Marco Sulla Mar 05 '20 at 12:11
  • 1
    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. – a.cayzer Aug 31 '20 at 21:09
  • This helps you to center de `` and not the text – Bryan J. Diaz Sep 10 '22 at 19:37
14

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;
    }
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • 1
    While true, the idea behind using twitter bootstrap is to use the existing classes as far as possible. See the answer by Jinpu Hu – Skurpi Jun 09 '13 at 20:13
  • @Skurpi 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. – Andres I Perez Jun 09 '13 at 22:03
  • @Skurpi Furthermore, those alignment classes [did not exist](https://github.com/twitter/bootstrap/blob/71669dda63644a7b4162ca63f8b9c88b3586c7e4/docs/assets/css/bootstrap.css) at the time of writing. This answer is a year old. – Andres I Perez Jun 09 '13 at 22:03
5

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

Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
Tinsae
  • 59
  • 1
  • 1
2

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>
Lenin Santiago
  • 21
  • 1