• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Centering subhead in BS4

Explorer ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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

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

TOPICS
Bootstrap , Code , How to

Views

332

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 07, 2021 Feb 07, 2021

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 widt

...

Votes

Translate

Translate
LEGEND ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

Much appreciated.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

LATEST

To be a little more precise

BenPleysier_0-1612741024813.png

As I pointed out in one of my videos.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines