From the course: Bootstrap 3 Essential Training
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Offsetting columns - Bootstrap Tutorial
From the course: Bootstrap 3 Essential Training
Offsetting columns
- In Bootstrap you can ask certain columns to move over by a certain number of column widths. That's called offsetting, so let's take a look at how it works. Something's troubling me about this layout. The problem is when we reach the mobile device size right here, you can see that some of these line widths are way too big and I would like to have this section take up less space. We can do that by adding offsets to our existing columns. So the way I will tackle that is, I'm going to grab all of these columns here, so col-sm-6, and I'm going to grab all of them, and then at the very beginning I'm going to add an offset. I'm going to say col-xs, or at the extra small size, go ahead and offset this column by three units. So let's go ahead and save that, and now you can see that this has scooted over by three units. However, right now our column's taking up too much space so what I also need to do is make sure that I say at that size, so col-xs-6, so this means that at the extra small…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Understanding Bootstrap containers6m 29s
-
(Locked)
Working with rows3m 13s
-
(Locked)
Creating columns10m 3s
-
(Locked)
Using multiple column classes3m 46s
-
(Locked)
Resetting columns3m 55s
-
(Locked)
Offsetting columns2m 52s
-
(Locked)
Nesting columns6m 9s
-
(Locked)
Customizing column order with push and pull3m 31s
-
-
-
-
-
-
-
-
-