Bootstrap media object Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 36 of bootstrap tutorial in
this video we'll discuss the bootstrap
media object bootstrap media object is
used to place media objects like images
of videos on the left or right hand side
aligned with the content such as tweets
comments etc let's see how to display
something like this using the bootstrap
media object let's flip to visual studio
what I have done so far is created this
images folder and within that we have
got two images Tom and Sam the first
thing that we want to do is display this
image on the page so let's create a div
element right here and set its class to
media we want this image aligned on the
left hand side of the text so I'm going
to nest another div element here and set
its class to media left which is going
to align the image on the left hand side
of the text and inside this development
let's create an anchor element and point
its HTF attribute to hash inside this
anchor element let's create an image
element and point its source attribute
to one of the images within our images
folder let's point it to Tom dot PNG and
on this image element we are going to
use the media object CSS class let's
also include the alt tag just in case if
we are not able to display the image for
some reason this is the message that
will be displayed instead of the image
let's save our changes and when we
reload this page notice we get the image
as expected now we want to display this
text right here on the right hand side
so we are going to create another
development and set its class to media
body and inside this the first thing
that we want is this heading right here
so to create that I'm going to use an h4
element and set its class to media
heading and you know let's say Tom
commented on July 28th 2016 so that's
what we want to display so Tom and then
we want the date to be italicized
and in a little bit small so I'm going
to use the small tag and then the
italics tag as well so the date is going
to be July 20th 2016 and then finally we
want a paragraph about bootstrap itself
so let's include a paragraph element and
then place a line of text about
bootstrap notice when the real Rover
page we get what we expect if you want
this image to be aligned on the right
hand side then use media right instead
of media left class and then this
development should be placed after media
body element let's save our changes now
when we reload our page notice we get
the image on the right hand side the
vertical alignment of the media can be
top middle or bottom the default is top
to align the media in the middle use
media middle class and to align it at
the bottom use media bottom class let's
look at this in action let's flip to
visual studio I'm going to align the
image first on the left hand side so
let's move this development to the top
and let's use media left class let's
make two more copies of this development
so the default vertical alignment is top
we are not using any of the vertical
alignment classes on this media div on
this media div let's use media middle we
want this to be aligned in the middle
and on the final one let's use media
bottom
let's say our changes and when we reload
our page here the media notice here it's
at the top it's at the middle and it's
at the bottom to see this properly
let's crease this grid column a bit to
do that let's actually change here the
grid column size to call excess for now
when we reload our page notice we can
clearly see here the images at the top
here in the middle and here it is at the
bottom finally let's discuss creating
lists of media objects to create a list
of media objects we use the media list
class media lists are useful for
creating comment threads that look like
this or for creating article lists let's
see how to create a common thread like
this using the media list class let's
flip to visual studio the first thing
that I'm going to do here is create an
unordered list and set its class to
media list and then place this first div
element inside this unordered list
within an unordered list we cannot
directly nest any other element except
Ally so I'm going to change this
development to Ally and then I'm going
to first remove this media middle class
from the second development and then
move this div element inside the
unordered list I'm going to place this
immediately after this paragraph element
you know within this media body div so
what is this going to do this is going
to create a nested div let's save our
changes and at this point look at this
when I reload this page notice we have
that nested media object here now let's
say we have here you know the first
comment is from Tom we want Sam to reply
to Tom's comment so let's change the
image and the name so on the nested
media object right here let's change the
image to Sam dot PNG and let's also
change this alternate text to Sam and
here the heading also
to Sam now when we reload our page
notice it appears as if Sam replied to
Tom and we again want Tom to be replying
to Sam to achieve that what we will do
is immediately after this paragraph
element within this nested media body
div let's place you know the same div
let's save our changes and when we
reload our page notice we have three
levels of nesting there so to Toms come
in Sam replied and again - Sam's comment
Tom replied let's increase you know the
grid column size here so let's actually
change it to call X's 7 and let's reload
our page now it looks much better and
finally again we have Tom's comment here
now we want this to be present inside
the list so what I'm going to do is take
this development and move this inside
the unordered list and then let's change
this development to Li let's say our
changes and when we reload our page
notice what we have here is similar to
what we have right here so it's that
easy creating nested media objects using
the media list class thank you for
listening and have a great day