Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

Posted by Harry Wilcken
Harry Wilcken
7,362 Points

Text Align Center doesn't work

Using Bootstrap, I wanted to center the text of speakers and schedule as in the video (see code), but the code in Bootstrap is not working .

<!--    speakers      -->
          <h1 class="display-4 text-xs-center my-3 text-muted">Speakers</h1>
          [Speakers bios go here]
 <!--   schedule       -->
          <h1 class="display-4 text-xs-center my-3 text-muted">Schedule</h1>
          [Conference schedule goes here]

I've tried to replace the text-xs-center with text-center (newer version of Bootstrap), but still not working. Any suggestion? Thanks

kofi amoussou
kofi amoussou
Courses Plus Student 7,381 Points

add the class text-center i.e <h1 class="display-4 text-xs-center my-3 text-muted text-center">Speakers</h1> and for schedule too <h1 class="display-4 text-xs-center my-3 text-muted text-center">Schedule</h1>

3 Answers

Tamás Bakó
Tamás Bakó
9,684 Points
Tamás Bakó
Tamás Bakó
9,684 Points

Hey Harry! I think the "text-xs-center" is outdated. Try to use "text-sm-center".

Harry Wilcken
Harry Wilcken
7,362 Points

Hi Tamás, thanks for your tip, but doesn't work if I don't use a <div class="container"></div> for "Speakers" and "Schedule" . One more thing, the Bootstrap version I am using is v4.0.0-alpha.6 and from it you just need to use text-center to align text in all viewport sizes, see below:

<p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> ---------to center the text----------- <p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Thanks anyway, have a nice day,

Harry

Harry Wilcken
Harry Wilcken
7,362 Points
Harry Wilcken
Harry Wilcken
7,362 Points

Well, I just found an option to solve the problem, still, I'm not sure if its the right way to do it, but, it works!

I just inserted a <div> with a class container in it before de <h1>Speakers. On the video, Guil is not using the <div> before <h1> text.

Kofi's option is not working. Sorry!

My CODE: <div class="container"> <!-- speakers --> <h1 class="display-4 text-center my-3 text-muted">Speakers</h1> [Speakers bios go here] <!-- schedule --> <h1 class="display-4 text-center my-3 text-muted">Schedule</h1> [Conference schedule goes here] </div> </div>

Henri Huisman
Henri Huisman
Courses Plus Student 16,371 Points

Tanx it works!

Daniel Valles
Daniel Valles
8,157 Points
Daniel Valles
Daniel Valles
8,157 Points

I tried text-sm-center and it worked for me.