Hello in this bootstrap four video, we're going to look at column offset in column offsetting is a simple concept within bootstrap allows you to move columns and elements to the right. That's essentially what it is doing. And column offsetting is used is done using the same numbering and screen size system as we have used to actually specify the width, the width of the column. So let me just go on to our web page. So we've got this. And on the medium screen size, each element is 444.

So imagine if I wanted this green element in the position of the blue element, and I wanted the blue element in the position on the green element, but on a separate line. Yes, I could add an empty div with a column width of what the green element is at the moment in between the red and the green and do the same for the blue and the green as well. That will simulate essentially what we're trying to do. But we don't want to do that one, it's a lot more code than is needed is not as efficient as using CSS, which bootstrap has provided. So to do it, we get the element that we want to move to the right, because we're going to leave this as it is, we're moving this one to the right. So we go here, can put it wherever you want within this class section, do call dash screen size.

So MD, dash to the offset, dash for a for say this refresh, and as you can see, this has moved right for grid spaces and that this is on a separate line. Watch what happened if I set this to refresh, this will move to the left a little bit. This is still on a separate line. The reason for that is bootstrap as we've said before, Has 12 grid spaces per line, and we've got four plus four. But you still have to mean you also have to factor in any offsets that you have. So four plus four plus two is 1012 minus 10 is two.

So we have a, a valuable grid spaces have two here. But the next element is of size four, therefore, it's on the next line. So I'm gonna set this back to four. And like I said, we also want this in the center. So essentially, under that gap, it's been a lot quite cool. So to do that, you just do call dash MD, dash offset, dash for refresh, and there you go.

That is one nice looking website. No, I'm just joking. But that's how you offset column. So let's show you what happens if I resize it back to a bigger size. And you might be looking and thinking what the hell happening because it shouldn't look like that because we've put the we put nd but remember I said in a early video, anything to do with column like column dash MD comm slash SM bubbles up unless it has its own offset or sois for a bigger screen size. So if I were to go to this start resizing it, so this is medium.

So now on small the offset isn't getting applied simply because we don't have an offset applied for small and the empty offset is larger, I mean medium is large and small. Hence, it's not been applied to it looks at the only bubbles up it doesn't bubble down in terms of screen width. So to fix this, we just want to do co dash screen sizes that we don't want to offset for dash LG dash offset dash zero. That's all we're gonna do. On this, make sure there is no offset on the changes to excel. paste it here, paste this on here, change this to excel save that boy refresh.

And now if I resize it, as you can see, on the extra large screen size, they're next to each other and that is a size of two to two to four star resizing, this is large, and this is doubly free, so free, free free. But if I resize it down to medium, the offset gets deployed before it's down to small and extra small, no offset is applied, but again, nothing bubbles down. It only bubbles up. So that's offsetting columns. If you have any questions, feel free to post them on sonar learning code at UK for slash question dot php. There'll be a link in the description to that plus another link to this source code.

So check that out as well. If you're having any issues, please rate, comment and subscribe. And as usual, thank you for watching and I hope you have a great day.