Introduction To Media Objects

5 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.19
You save:  €37.48
List Price:  £112.24
You save:  £32.07
List Price:  CA$192.60
You save:  CA$55.03
List Price:  A$217.25
You save:  A$62.07
List Price:  S$190.37
You save:  S$54.39
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
List Price:  NZ$236.19
You save:  NZ$67.48
List Price:  د.إ514.11
You save:  د.إ146.90
List Price:  ৳15,319.96
You save:  ৳4,377.44
List Price:  ₹11,694.97
You save:  ₹3,341.66
List Price:  RM669.64
You save:  RM191.34
List Price:  ₦181,567.03
You save:  ₦51,880
List Price:  ₨38,857.05
You save:  ₨11,102.81
List Price:  ฿5,147.32
You save:  ฿1,470.77
List Price:  ₺4,550.80
You save:  ₺1,300.32
List Price:  B$732.62
You save:  B$209.33
List Price:  R2,665.20
You save:  R761.54
List Price:  Лв256.41
You save:  Лв73.26
List Price:  ₩192,455.38
You save:  ₩54,991.18
List Price:  ₪530.55
You save:  ₪151.59
List Price:  ₱8,009.48
You save:  ₱2,288.58
List Price:  ¥21,617.62
You save:  ¥6,176.90
List Price:  MX$2,374.63
You save:  MX$678.51
List Price:  QR509.31
You save:  QR145.52
List Price:  P1,929.29
You save:  P551.26
List Price:  KSh18,618.67
You save:  KSh5,320
List Price:  E£6,790.31
You save:  E£1,940.22
List Price:  ብር7,942.45
You save:  ብር2,269.43
List Price:  Kz117,241.62
You save:  Kz33,500
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
List Price:  CN¥1,013.40
You save:  CN¥289.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
List Price:  DA18,826.63
You save:  DA5,379.42
List Price:  FJ$317.87
You save:  FJ$90.82
List Price:  Q1,085.64
You save:  Q310.20
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
List Price:  DH1,416.82
You save:  DH404.83
List Price:  L2,505.87
You save:  L716.01
List Price:  ден8,074.51
You save:  ден2,307.16
List Price:  MOP$1,125.87
You save:  MOP$321.70
List Price:  N$2,657.05
You save:  N$759.21
List Price:  C$5,137.77
You save:  C$1,468.04
List Price:  रु18,685.75
You save:  रु5,339.16
List Price:  S/525.19
You save:  S/150.06
List Price:  K530.57
You save:  K151.60
List Price:  SAR525.14
You save:  SAR150.05
List Price:  ZK3,528.03
You save:  ZK1,008.08
List Price:  L652.66
You save:  L186.48
List Price:  Kč3,316.71
You save:  Kč947.70
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
List Price:  Bs966.66
You save:  Bs276.20
List Price:  COP$547,598.77
You save:  COP$156,467.96
List Price:  ₡69,943.14
You save:  ₡19,985.18
List Price:  L3,446.12
You save:  L984.67
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In


Hello, in this bootstrap four video, we're going to show you media objects. Media objects allow you to group and float different media items such as images, video, audio, text, that sort of stuff. And it provides a bunch of styling, which makes it look really, really cool. And you can position it to the left or to the right of essentially their container. And what I want to do is also show you or actually, once I've coded it, I want you to just think for a second what it looks like, because chances are, you've seen something very similar. First of all, I'm just gonna change the last element.

Okay, this one to span 12 columns in the extra law screen size, I'm going to remove the blue background, simply because it's going to look a bit nicer with our media objects. So now this is on a separate line. Inside here, I'm going to get rid of the Hello World. Now let's start creating our Meteor objects. So div class media didn't go built in all these classes. Also, we're not going to code in any CSS for any of this.

Even though I'm pregnant with in an element which is, which has classes of column and how many column spaces you want it to span, you can put it outside of the column prior to the row press or the container. We just works a lot better within bootstraps elements, and CSS. So within here, I'm going to put an A and for this one per class of media, dash left, h ref and for this I'm simply gonna put Actually, no, I'm gonna put google google I'm gonna put Sony sonar Okay. And in here I'm gonna put an image which is gonna serve as the form now essentially, SRC equals also needs a class, we'll add the source in a moment, media the object. And for the image, you want a square image. I'm going to link to one right here.

Copy and paste that in. It's quite a big URL. So inside of the anchor tag, we're going to do div and this div is going to have a class of media body so this is the meat of this media object. Inside here, we're going to do haitch for the h4, we'll have a click Last of media dash heading, and this will be the title of your media object on the put. Awesome title. Then on a separate line, simply put the media body in terms of the meat of the content, the content like the text.

For this, I've got a random paragraph right here, Copy that. Paste it right here. And now we're all looking good. I'm just gonna save this, go back to a web browser refresh. And there we go. We have a media object within an element.

And now if we start resizing it, it just according and the reason is gone like that is simply because on the medium screen size, this spans four columns, and it works really well. It doesn't sort of overflow or do anything like that. So he's great for a blog for news websites. And I'd see it Adjusting amazingly well. And I said at the start of this video, we're going to look this and have a look, what does it remind you of? If you haven't already guessed, it's like commenting on a lot of blogs.

So they'll have usually this will be a thumbnail or icon of the user has commented, this could potentially be the date or even the title for the comment. And this could be the actual comment it self or actually no, sorry, this will usually be the name of the user that's commented, this would be the icon or the thumbnail of the user. And we said, and this will be the comment that the user has posted. So this is a great way for creating comments on your website without having to do all the styling for it. But obviously, you can do a lot more like I said, you can use it for blogs for media articles for news, that sort of stuff. That's it for the basics of media objects, actually.

One last thing If you simply put this as media dash, right, save it, go to the web browser refreshed do and put this afterwards like so. As you can see, it is now on the right with a couple of small changes, we can adjust the position of the objects inside of the meteor object. We're going to revert it to how you work on it like so. So that's it for media objects. If you have any questions, feel free to post them on our education platform on our learning code at UK for slash question dot php, there'll be a link in the description to that so you don't need to remember plus w another link in the description to source go from this video. And as usual, thanks for watching, and have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.