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) Getting to Know Bootstrap 4 Creating a Simple Page

James Reynolds
James Reynolds
3,182 Points
Posted by James Reynolds
James Reynolds
3,182 Points

New offset classes for v4 are different and I'm a bit confused on how to apply them.

The offset classes seem to be deprecated in the beta version of v4. I'm confused as to exactly how they function. I can't get the input form to center on the page. I tried several approaches. such mr-auto, ml-auto, ml-md-auto, ml-lg-auto. I'm not sure how this is supposed to work.

4 Answers

Cristian Stoica
Cristian Stoica
4,760 Points
Cristian Stoica
Cristian Stoica
4,760 Points

As of August 11 the Bootstrap 4 version has changed dramatically, especially in the offset part. I used a "trick" for element margins found in the next part to center the div. I don't know if it's right, but it worked somehow. 

<div class="col-md-6 mx-auto">
Andre Acres
Andre Acres
3,232 Points

This had been driving me nuts for hours until I found this. Thanks so much for posting! This Bootstrap course is in desperate need of an update.

iliass aek
iliass aek
4,432 Points
iliass aek
iliass aek
4,432 Points

that's working . For B4 we should use .col-lg-6 instead .col-md-6 so the right code is

<div class="col-lg-6 mx-auto">

source

peichunliu
peichunliu
33,154 Points
peichunliu
peichunliu
33,154 Points 
<div class="col-lg-6 offset-lg-3">

It works.

Qasa Lee
Qasa Lee
18,916 Points
Qasa Lee
Qasa Lee
18,916 Points

Nope...It seems not working...

osman musse
osman musse
169 Points
osman musse
osman musse
169 Points

yeah especially because of the the new Bootstrap Beta. I was looking at offsetting the column just try to understand what f..... mx and ml mean was annoying.

Sarah Montoro
Sarah Montoro
843 Points

Super annoying! Not sure if you figured it out, but it looks like m = margin and x = both the right and left sides, therefor mx-auto is saying to add an equal margin to both sides, thus centering it. https://v4-alpha.getbootstrap.com/utilities/spacing/

Audra Ogilvy
Audra Ogilvy
3,142 Points
Audra Ogilvy
Audra Ogilvy
3,142 Points

Thank you so much for posting, all of you! I had the same question, and now the grey clouds have parted and the sun is shining through again.