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) Using Bootstrap Components Adding Buttons and Button Groups

nicolaslemaire
nicolaslemaire
12,806 Points
Posted by nicolaslemaire
nicolaslemaire
12,806 Points

Hi guys, has anyone trouble with the "center-block" class on the buttons? On my external editor, I cannot make it work.

Hi guys, has anyone trouble with the "center-block" class that Guil uses on the buttons? On my external editor, I cannot make it work. I mean, this class doesn't center my button, it remains on the left of the screen. Ditto for the first buttons on top of the page? Is it some kinda new feature that is not allowed on every browser or something? I'm using Chrome. Thanks in advance.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

I've tried to add some inlineCSS with style... nope, I've tried to add "text-xs-center", nope :) anyone?

Ryan Oakes
Ryan Oakes
9,787 Points
Ryan Oakes
Ryan Oakes
9,787 Points

Hey Nicolas. Check out this link.

It appears .center-block was removed in favor of .m-x-auto. Another user from a similar question thread suggested this as a fix and it worked for me:

<button type="button" class="btn btn-outline-info d-block m-x-auto">
Don't Miss Out Register Now
</button>

13 Answers

Anthony Rice
Anthony Rice
7,976 Points
Anthony Rice
Anthony Rice
7,976 Points

I think I got it. Just add these classes (d-block m-x-auto). The documentation for both classes is here: http://v4-alpha.getbootstrap.com/components/utilities/

Mister Moody
Mister Moody
48,333 Points

Anthony's example worked for me!

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Awesome Ryan, thanks for the link and the detailed explanation, I read them and can figure it out now, finally! having said that, I've tried your solution for the "group button" at the top of the page and "d-block m-x-auto" doesn't seem to be working there, any hint on that? :) Take care,

Ryan Oakes
Ryan Oakes
9,787 Points
Ryan Oakes
Ryan Oakes
9,787 Points

Hey Nicolas,

Try adding "m-y-3" to the class after the "m-x-auto" and see if that works.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Unfortunately no, I'm afraid it's not working, they're not "attached anymore" and "Register Now" is basically below and stuck to the left while the "See Speakers" button has moved to the right. So there's basically some sort of "diagonal" between those 2 :/

Ryan Oakes
Ryan Oakes
9,787 Points
Ryan Oakes
Ryan Oakes
9,787 Points

Hmm no bueno.

What browser are you using? It'll help if you provide a code snippet too!

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Here's my code snippet: <div class="btn-group m-t-2" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary btn-lg m-x-auto m-y-3" data-toggle="modal" data-target="#register">Register Now</button> <a class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a> </div>

it reads "Chrome is up to date" so I own the latest version, nothing peculiar in here.

Ryan Oakes
Ryan Oakes
9,787 Points
Ryan Oakes
Ryan Oakes
9,787 Points

My buttons look like this! 

        <div class="btn-group m-t-2" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary btn-lg">Register Now</button>
          <a class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a>
        </div>

Either way, keep at it - you'll get it eventually, just gotta keep tinkering.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

It's pretty weird, "no bueno" as you said LOL, I'll write Guil about it tomorrow. Thanks Ryan, appreciated :)

Maria Larrosa
Maria Larrosa
5,455 Points
Maria Larrosa
Maria Larrosa
5,455 Points

It turns out that the m-x-auto is missing the 'display:block;' that the 'center-block' used to have. Only way I fixed it was by creating my own CSS file and adding 'display:block' to 'm-x-auto'. Hope this helps.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Hello, Thanks Maria, I'll try that out and get back to you if that doesn't work out, have a nice one :)

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Nicolas,

I'm not sure when the bootstrap video's came out, but bootstrap is ever updating, and changing. Definitly follow these video's but use the docs from bootstrap to make sure you are using the correct class names:

bootstap doc's

Maria Larrosa
Maria Larrosa
5,455 Points
Maria Larrosa
Maria Larrosa
5,455 Points

Brilliant! Anthony! Thanks for letting us know. :)!

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Yep, thanks everyone, will read that carefully :)

Christiaan Quyn
Christiaan Quyn
14,706 Points
Christiaan Quyn
Christiaan Quyn
14,706 Points

In the documentation it doesn't say say put 'd-block' in front of 'm-x-auto' , I'm guessing d-block means display - inline block ?

Douglas Rice
Douglas Rice
19,409 Points
Douglas Rice
Douglas Rice
19,409 Points

Hey guys, If you follow Anthony's instructions above and it doesn't work, it's probably because the download files link to an older release of Bootstrap 4. Make sure you're linking to the most recent file and it should work fine.

Kenya Sullivan
Kenya Sullivan
21,711 Points

Thanks Doug, that fixed it for me.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

I checked the download files of bootstrap, but d-block m-x-auto is still not working to center the buttons. Any other solutions? I am stucked on this for a while now.

nicolaslemaire
nicolaslemaire
12,806 Points
nicolaslemaire
nicolaslemaire
12,806 Points

Thanks Douglas, appreciated! :)