Centering subhead in BS4

[larrycfc]

I've styled subhead with margin: auto but it's not working. What seems to be interfering?

https://www.larrytriplett.com/dev/men2.htm

[osgood_]

Its important that you observe the correct way to mark-up a Bootstrap page. The h5 tag needs to go into a <div> container 'row' then apply the Bootstrap 'mx-auto' class to the h5 tag:

<div class='row'>
<h5 class="subhead mx-auto" id="holiday">Christmas / Holiday Songs</h5>
</div>

[larrycfc]

Thanks, I didn't realize it was required for a stand-alone element like a heading. Does everything inside the container need a row div?

[osgood_]

Does everything inside the container need a row div?

You can enclose everything in 1 row, I think. I don't use Bootstrap but generally its:

<div class="container">

<div class="row">

YOUR CONTENT GOES HERE

</div>

<!-- end row -->

</div>

<!-- end container -->

You can of course use as many Bootstrap containers and rows as you like but its best to limit their use for a more streamlined build. Only use them when its a necessity to do so.

[Nancy OShea]

MX-auto is for horizontal centering a block-level container.  To horizontally center text within the container, use the "text-center" class.

EXAMPLE:

<p class="text-center">This is centered text.</p>

Or if every line of text should be centered, apply your class to the parent container.

<div class="container">

     <div class="row">

          <div class="col text-center">

          <h3>This heading is centered.</h3>

          <h4>This sub-heading is centered</h4>

          <p>This text is centered.</p>

         </div>

     <div>

<div>

For reference:

Bootstrap Text Utilities

https://getbootstrap.com/docs/4.0/utilities/text/

[osgood_]

MX-auto is for centering a block-level container. To center text within the container, use the "text-center" class.

OP doesn't want text centered 'within a container', they want the container itself centered horizontally.

[Nancy OShea]

It's not clear what the OP wants from this.  Did you look at the source code?  There is an unfortunate overuse of unnecessary custom classes.   It's a real shame people don't take time to learn how to use Bootstrap properly.  If they did, it would save them from hours of tedious manual coding.  

[osgood_]

It's not clear what the OP wants from this.

It's very clear - they just want the sub heading 'Christmas/Holiday Songs' horizontally centered.

It's a real shame people don't take time to learn how to use Bootstrap properly.

Sure, I agree, the only way is to fully know what you are working with, whatever workflow you choose.

If they did, it would save them from hours of tedious manual coding.

Depends what your opinion is - mine is - when you are coding, you are learning. When you are coloring by numbers you are just a zombie.

[larrycfc]

Hi, OP here. I am trying to learn how to code properly and have spent a fair amount of time reading Bootstrap info, primarily in w3schools. But I'm not an IT professional. I thought I had created a fairly limited number of overrides in my css file and would be happy to eliminate the redundancies.

That said, my objective here has simply to have the h5 in question centered while styled in reverse print with the custom subhead class. The initial response lead me to question whether the other headings at the top needed more than the text-center class to be correct.

[osgood_ · Accepted solution]

The initial response lead me to question whether the other headings at the top needed more than the text-center class to be correct.

The headings at the top of your page are correct using the Bootstrap 'text-center' class applied to them. However you can't use  'text-center' with the heading 'Christmas/Holiday Songs' as you needed a solid background behind the text which only stretches the width of the text itself. If you had used 'text-center' that brown background would have stretched the width of its parent container.

One way to avoid that was putting the <h5></h5> heading in a Bootstrap row container and then applying the Bootstrap class 'mx-auto' to the <h5> tag, which forces an equal margin either side of the heading. Other ways are possible.

[larrycfc]

Much appreciated.

[BenPleysier]

To be a little more precise

As I pointed out in one of my videos.