Bootstrap 3 responsive utility classes Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part eight of bootstrap tutorial
in this video we'll discuss bootstrap
response you'll utility classes so what
are bootstrap responds utility classes
bootstrap response utility classes are
useful for showing and hiding content by
device by a media query here we've got
some of the responsive utility classes
available in bootstrap 3 notice there is
a class visible excess excess stands for
extra small so if we apply this class on
an element that element will be visible
only on an extra small screen size we
also have visible SM SM for small so if
we apply this class on an element then
that element will be visible only on a
small screen size so if we apply both
these classes on element then that
element will be visible on both extra
small and small screen sizes but not on
medium and large notice for medium and
large screen sizes also we have the
corresponding visible classes we also
have the respective hidden classes for
different screen sizes for example when
we apply hidden MD on an element that
element will be hidden on a medium
device and it will be visible across all
other screen sizes let's understand the
use of these classes with an example now
what we want to do is design a web page
with four columns like this to get this
I have this HTML notice we have a
container within the container we have
got a row and within this row we have
got four developments and notice on
every development I have used call lg3
class so what is this going to do this
is going to give us four columns
side-by-side per row on a large screen
size also notice on every development I
am also using call MD 4 so this is going
to make three columns side-by-side and a
single row on a medium screen size and
by using call SM 6 as well on every
element so this is going to give us only
two columns side by side in a single row
on a small screen size and then this
call XS 12 is going to make only one
column per row on an extra small screen
size that means all the columns are
going
to be stacked on top of each other and
for the inner development which is
displaying the text you know we are
applying a custom CSS class and here is
that CSS class I have this exact same
HTML and CSS class already typed within
visual studio so if we view this page in
the browser this is how it looks like at
the moment now notice on a large screen
size we have four columns side by side
next to each other in a single row now
as I start to resize the browser look at
what happens when we are within a medium
screen size notice we only get three
columns on a small screen size we get
only two columns and on an extra small
screen size we get only one column
parallel and here is what we want to do
now the column which says all screens
this column should be visible across all
screen sizes that means we don't have to
do any modification for this first
column right here but the second column
which says medium large and small we
want this to be visible only on medium
large and small screen sizes not on an
extra small screen size we can very
easily achieve this by using one of the
hidden classes so we don't want this
column to be visible on an extra small
screen size so I can use the hidden
class hidden XS so what is this going to
do this is going to hide this element on
an extra small screen size and it will
be visible across all the other screen
sizes and that's exactly what we want
this is one way of achieving it another
way of achieving this is by using the
corresponding visible classes as well so
we want this to be visible on a large
device so I can use visible LG we also
want it to be visible on a medium device
so I'm going to use visible MD we also
want it to be visible on an extra small
device so I mean a small device so I'm
going to use visible SM so with visible
classes we have to use three of them
whereas with hidden we only need to use
one class so let's use that hidden we
want to hide this on an extra small
screen size
so I'm going to use hidden XS now the
next column medium and large we want
this to be visible on medium and large
screen sizes so I'm going to use visible
LG and visible MD we can also use the
hidden classes that is hidden SM and
hidden XS instead of the visible classes
finally this one column right here large
we want this to be visible only on a
large screen size so I'm going to use
visible LJ let's save our changes reload
this page notice on a large screen size
we see all the four columns as soon as I
start resize and when we fall within the
range of a medium screen size look at
what's going to happen to the large
column it will be invisible we don't see
that it's hidden now and on a small
screen size we only see the first two
columns look at that now we are within
the break point of a small screen size
when we fall into extra small screen
size zone notice we only have one column
which says all screens so that's the use
of these visible and hidden responsive
utility classes in bootstrap now as of
bootstrap version 3.2.40 min three
variations one for each CSS display
property shown right here in this table
now CSS display property can be block
inline or inline block so for each of
these values of the display property we
have the corresponding visible classes
so for example if we are talking about
visible large class then we have three
variations of that visible large block
visible LG inline and visible LG inline
block similarly when we are talking
about a medium device then we have
visible MD block visible empty inline
and visible empty inline block so one
class for each display property value
now if you are wondering what is the
difference between
play inline display:inline-block and
display:block here is an article that
explains the difference so if we look at
that article so here we've got the outer
element is the div element and within
that we've got some text and here we
have a span element okay so here we have
a span element and for this panel
element let's say we have a height of
100 pixels and the red border okay and
if we apply display:inline property on
that span element this is how the span
element will look like if we apply
inline block instead of inline then this
is how that span element will look like
and finally if we apply block then this
is how this pan element will be
displayed so for each value of the
display property block inline and inline
block we have the corresponding visible
classes again for each screen size now
these classes visible access visible SM
visible MD visible LG these classes are
still available but then they are
deprecated as of version 3.2.40 seen
just now we can also use these visible
print and hidden print classes to show
or hide certain elements for printing
purpose let's understand the use of
these classes with an example let's say
I have got you know two columns and I am
only going to use column XS 12 so we
only want single column on all the
screen sizes so let's use column XS and
I'm going to get rid of this hidden XS
class from here now I want this to be
hidden for print meaning you know I want
this column to be visible on the browser
okay so what I'm going to do is change
the text to visible on browser when
not printing okay and here this column I
want this to be visible for print so
let's say here the text is visible when
printing let's save our changes so now I
am going to reload this page look at
this the column which has hidden print
okay
this column is visible we are while we
are on the browser okay and when I try
to print this page look at that so now
it's loading the preview and look at
what happens the other column which is
visible when printing where we have this
visible print class applied you know
that's what is displaying and not the
other column okay so these classes are
useful for printing purposes again as of
bootstrap version 3.2.40 one for each
CSS display property values shown right
here in order display:block inline and
inline block we have visible print block
visible print inline and visible print
inline block the visible print class
also exists but it is deprecated as of
bootstrap version