Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap Basics Responsive Layouts With the Bootstrap Grid Reordering and Offsetting Columns

David Service
David Service
12,928 Points

How do we move a content section using Bootstrap "Offset" classes?

I've noticed that in the Bootstrap documentation it allows for 2 types of offsetting when dealing with sections of content (https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns).

The way that Guil used (using margin utilities) is great, but I'm curious about the second method: every time I try to use it to get the same results it doesn't work at all. My code for both methods is below:

"Margins Utilities" method (works) <div class="col-md col-xl-5 ml-auto">

"Offset classes" method (isn't working) <div class="col-md col-xl-5 offset-xl-2">

Am I doing something wrong, or have the "offset" classes been depreciated (even though they're still referenced in the documentation)? I'm very interested in being able to use either method, if possible.

2 Answers

Liam English
Liam English
3,837 Points

Hi David,

Offset, push, and pull were 'disabled' in the Bootstrap 4 beta so you had to use auto-margins.

The tutorial video is slightly out of date (using the v4 Beta) and they use the following BootStrap CDN link:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

Since then, BootStrap 4 has moved into the Beta 2 phase and if you use the following CDN link instead, you will find that offset now works as intended again.

Here is the current BootStrap v4 Beta 2 CDN link which restores the functionality of Offset etc:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Your code was fine, it's just that the feature you were looking for was unavailable in the Beta version at that time.

David Service
David Service
12,928 Points

Thanks Liam,

I had no idea that the beta had disabled those features, and I was driving myself crazy trying to figure it out. LOL

David

Mark Ramos
Mark Ramos
19,196 Points

Not sure David; your code looks good and also works fine on my end using offset.