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

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.

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

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

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/

Anthony's example worked for me!

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,

Hey Nicolas,

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

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 :/

Hmm no bueno.

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

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.

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.

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

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.

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

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

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

Yep, thanks everyone, will read that carefully :)

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 ?

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.

Thanks Doug, that fixed it for me.

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.

Thanks Douglas, appreciated! :)