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 Basics Responsive Layouts With the Bootstrap Grid Reordering and Offsetting Columns

David Service
David Service
12,928 Points
Posted by 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
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
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,209 Points
Mark Ramos
Mark Ramos
19,209 Points

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