Bootstrap center heading
-
16-06-2021 - |
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?
Solution
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
bootstrap has added three css classes for text align.
OTHER TIPS
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.
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>
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. :-)