Bootstrap: Bootstrap 4: heading won't align to center

[jantivola]

Hi, I'm starting to fix my css since I just updated our website's bootstrap source code to version 4.

I've got an issue with regards to aligning the heading to center. I've tried the following options:

option 1:

#sectionname h2 {
text-align: center;
}

option 2:

#sectionname h2 {
text-align: center!important;
}

option 3: (the latest i've added)
<h2 class="text-center">How does it work?</h2>

still, it won't work. I've shared a screen cap for reference.

Any help will be appreciated. Much love to bootstrap!

[splice7]

You can use Flexbox here. Just add .d-flex and .justify-content-center and it'll be centered.

[anaggh]

Since your screenshot shows that it is between row try using mx-auto

<div class='row'>
  <h2 class='mx-auto'>hello</h2>
</div>

[jipexu]

@anaggh

yes this is the shortest way of the two solution

[mdo]

Columns should be the only children elements of a row. Rows are flexbox, thus your heading is behaving as a flex item.

[jantivola]

Thanks @anaggh , it worked :)

[jantivola]

Thank you, @mdo I'll keep that in mind :)