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
Sarah Montoro
843 PointsWhy can't I center the Register button in the form with mx-auto?
It worked with my buttons in the body code, so why won't it work with the Register button in the form?
<hr class="mb-2">
<button type="submit" class="btn btn-primary btn-lg mx-auto">Register</button>
1 Answer
Brett Warden
14,036 Points//d-block will change the property of the button to 'block'
<hr class="mb-2">
<button type="submit" class="btn btn-outline-info d-block mx-auto">
Register
</button>
Sarah Montoro
843 PointsIt worked, thanks! Why does it need to be a block?
Brett Warden
14,036 PointsBrett Warden
14,036 PointsA block-level element will span the entire width of the container as far left and right as it can go with no other elements next to it. If you would need several buttons next to each other on the same line, you could use "d-inline-block", which will allow other elements to share the same line if they have similar display properties.
If you were to use the "float" property on one element, any element(s) after would wrap/flow around the floated element, however, any elements with absolute positioning will ignore the float property. You can simply use the "clear" property to avoid this.