Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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>

Tanx it works!

Daniel Valles
Daniel Valles
8,157 Points

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