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 systems.co.us 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.