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

fisnik poroshtica
fisnik poroshtica
14,154 Points
Posted by fisnik poroshtica
fisnik poroshtica
14,154 Points

why is not working "Center Content", Bootstrap?

Link for Center Content is not working. I also made same code as in video but isn't Working

https://w.trhou.se/naz6qo4qrn

5 Answers

Essi Kivivuori
Essi Kivivuori
16,663 Points

I'm not sure, but try this: <button type="button" class="btn btn-outline-info btn-lg d-block mx-auto my-3 ">Don't Miss Out, Register Now</button>

Lakshit Kerai
Lakshit Kerai
3,816 Points
Lakshit Kerai
Lakshit Kerai
3,816 Points

instead of "center-block" use "d-block" to simply set an element's display property to block, and

use "mx-auto" class for horizontally centering fixed-width block level content by setting the horizontal margins to auto.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

You're probably using a newer v4 version of Bootstrap. center-block is no longer available. Essi Kivivuori's solution works because d-block will set the display of your button to "block", and mx-auto sets "fixed-width block level content" horizontal margins to "auto". Two steps for the price of one, but now you have more control over your styles.

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 think I did just that;

<div class="btn-group btn-lg d-block mx-auto my-3"role="group" aria-label="..."> <button type="button" class="btn btn-primary btn-lg d-block mx-auto my-3">Zuurstoftest</button> <button type="button" class="btn btn-primary btn-lg d-block mx-auto my-3">Gratis ebook</button> <button type="button" class="btn btn-primary btn-lg d-block mx-auto my-3">Start vandaag nog!</button> </div>

https://teamtreehouse.com/workspaces/22998992#

Then why is the buttton group not centering?

Dominic Davies
Dominic Davies
776 Points

Worked for me, Thank you! using Bootstrap 4 alpha.6

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

Joe Schultz
Joe Schultz
6,191 Points
Joe Schultz
Joe Schultz
6,191 Points

Ok, I looked over your code, and noticed some typos. The code for the button should look like this:

 <button type="button" class="btn btn-info-outline btn-lg center-block m-y-3">Don't Miss Out, Register Now!!</button>

The m-y-3 on the end of the button class was my-3. That error was repeated throughout the page. After I "fixed" that I tried to see if it worked, and it still did not look right.

After that, I downloaded the zip files for the video, and compared Guil's code to yours. I discovered that Guil used Bootstrap 4.0.0-alpha.2, and you used the current version of Bootstrap 4.0.0-alpha.5. Because Bootstrap 4 is still in development, there were some changes made between alpha.2 and alpha.5. So, if you want to follow along with the lessons, you will need to replace the link to the stylesheet with the following:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

This will make the lessons work, but these lessons will not teach you the current version of Bootstrap 4.

Joe Schultz
Joe Schultz
6,191 Points
Joe Schultz
Joe Schultz
6,191 Points

In the button class line, change block-center to center-block.