Skip to main content
This topic has been closed for replies.
Correct answer osgood_

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.


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.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 7, 2021

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/

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
February 7, 2021

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
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 7, 2021

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.  

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
February 7, 2021

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>

L
larrycfcAuthor
Inspiring
February 7, 2021

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?

O
osgood_
Legend
February 7, 2021

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices