Bootstrap grid column offset Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 5 of bootstrap tutorial in
this video we'll discuss the concept of
offsetting the grid columns we'll also
discuss some of the bootstrap classes
that are available to style an image
element when creating website layouts
using the grid system you may want to
move grid columns to the right for
alignment purpose let's understand this
with an example
let's say we want to create a layout
that looks like this in the first row we
want to equal columns and in the second
row we want four equal columns we can
very easily achieve this using this HTML
notice within the container we've got
two rows that's our first row and this
is our second row with in the first row
we've got two columns each columns
planning three columns within the 12
column bootstrap grid system and within
our second row we've got four columns
again each column spanning three columns
within the 12 column bootstrap grid
system I have this exact same HTML
already typed within visual studio so
when we view this in the browser this is
how it looks like now what we want to do
is Center the two columns in the first
row like this to achieve this we will
have to push the first column in the
first row to the right by three columns
and this is exactly the purpose of
offset classes in bootstrap just like
how we have different grid classes for
different screen sizes we have the
corresponding offset classes as well so
to offset a column on an extra small
device we use call - XS - offset class
to offset a column on a smaller device
we use call - sm - offset class so on
and so forth now we want to push this
column the first column in the first row
to the right by three columns so I am
going to use call MD - offset - three on
the first column on in the first row so
this is going to push this column to the
right by three columns which is going to
push the second column as well to the
right in our by three column so we get
these two call
centered let's look at this in action so
let's slip to visual studio so this is
our first column in the first row so in
addition to call - MD - 3 I am going to
use call - md - offset 3 so this is
going to push this first column to the
right by 3 columns so let's save our
changes and when we refresh this page
look at that the two columns are nicely
centered as expected now let's say we
want to create you know six columns gap
between the first and second columns in
the first row like this to achieve this
we will have to push the second column
to the right by 6 columns the first
column will stay where it is okay so we
only want to push the second column to
the right by 6 columns so we can very
easily achieve this by using call MD
offset 6 on the second column like this
so let's flip to visual studio so I'm
going to remove the column MD offset 3
from our first column and apply this on
our second column in the first row and
since we want to push it to the right by
6 columns I'm going to use MD offset 6
so let's save the changes and when we
reload this page look at that we get 6
columns gap between the first column and
second column now let's look at a simple
example of where this offset feature
could be useful let's say we want to
create a layout that looks like this
within our second row we want three
equal columns and within our first row
we want just one image and that image
should be centered now this can be very
easily achieved so within our second row
notice we want three columns so each
column here is spanning four columns in
the 12 column bootstrap grid system
that's our second row in the first row
we have an image element we have set the
source of the image and we have the
class attribute here we want the image
also to span four columns within the 12
column bootstrap grid system so we are
using call MD for and in addition to
that since we want to
the image to the right by four columns
we using call MD offset for I have this
exact same HTML already typed within our
notepad so I'm going to copy that and
paste it within our index dot HTML so
let's delete this and paste it okay now
we need this image so these images are
present at this path so I mean I'm on
Windows 7 operating system so the path
on my machine is C users public pictures
sample pictures so we want this tulips
image so I'm going to copy that and I'm
going to add a new folder to a project
and I'm going to name it images let's
paste the image into this folder okay so
we have our image there so let's save
our changes and look at this when we
reload the page we get three columns
here and in the first row we have the
image nicely centered but now there's a
problem here look at this the image
width is not the same as the width of
this column that's because we are
applying a margin of three pixels on all
the four sides instead let's include a
margin only on the bottom so I'm going
to change this margin - bottom let's
save the changes and when I reload this
page notice the width of the image is
the same as the width of the column
there is another problem as well look at
what's going to happen when I resize the
browser vendor notice on a smaller
device we are getting a horizontal
scrollbar the image is not responsive to
see the full image we will have to
scroll left and right let's see how to
make this image responsive to make
images responsive all you need to do is
apply a different class and that is
image responsive so in addition to these
two classes on that image element I am
going to include image responsive let's
save our changes and look at this when
we reload the page
and when we resize it look at that the
image is also now responsive it scales
you know according to the browser screen
size we don't get that horizontal scroll
bar anymore let's look at a few other
classes that we can use along with
images to style them let's say for
example we want to style this image like
a circle to do that we use a different
class and that is image - circle let's
save the changes and reload this page
notice the image is styled as a circle
let's say we want to style it as a
thumbnail to do that we use a different
class and that is image thumbnail so now
the image is displayed as a thumbnail we
have another class as well and that is
image rounded which is going to give us
rounded corners for some reason this
image rounded class is not working when
I use it with either grid classes or
offset classes when I remove these two
classes that's when the image rounded
class works as expected look at that I
remove those two classes let's save the
changes and when I reload this page
notice we get rounded corners as
expected but the moment I put those
classes back in place and when we reload
this page we don't get that rounded
corners if you know a fix for this issue
please leave it as a comment so it could
help us so to make images responsive we
use image responsive class on the image
element we also have few other bootstrap
classes that we can use to style an
image element have seen image circle
image thumbnail and image rounded thank
you for listening and have a great day