Hello everyone in this bootstrap four video, we're going to look at chords within bootstrap. So chords are flexible and extensible content container allows you to put headers, footers, and a variety of other content. They're great for showcasing something off. Maybe you have an image, Target or a description, maybe a link to a product, for example. So if you're a game developer or an application developer on your website, you want to just showcase a few different products that you've done. You can use cards cards are a great way of displaying some content very nicely in a minimalistic way.

So in this video, we're just gonna cover the basics of chords, because there's a lot to do because we separate videos covering only other features. So to get started, just create a div tag. This has a class of card and inside here, we're just gonna put an image tag For the actual image itself, Korean link editing from the bootstrap website, this is what they use. And this is just a free hundred 18 by 180 pixel gray image that has text on it doesn't look kind of special, but it basically get the job done and illustrates what we're trying to do. So it's grateful that this added class, I'm going to add called IMG top and now just add an alt attribute and for this outcome called image. Now we're gonna add a div tag.

And this div tag is gonna have a class of called block. Inside here, we're gonna have a H tag. Again, you can do whatever you want. You don't have to have a hateful You don't even have to have a hashtag The beauty of these components are they are customizable. So if you don't want to image don't print images, when a h1 tag per h1 tag in there if you want to, if you want styling, like styling, it's what you want. class called title.

And then silence on put. This is a total, like the best title ever. I'm going to put the p tag for this one called dash Tex, oh, sorry, I should be the class. Class equals called dash text. And in here, we're just gonna put some random text actually misspelled that. And for that, what I'm going to do is go to Google and type in random paragraph.

It's like going to this website, generating random paragraph or tutorial. Yeah. In a Okay, so let's copy that. paste it in between these p tags. Now we have our random paragraph and we're gonna add a button as well. Obviously, you can add different types of buttons.

But we're just gonna keep it simple can add a class as well. btn and btn dash access. Yeah, I'm for this I'm gonna play HTTP four slash four slash so nos system.co.uk. Save it. Go to our web browser. Refresh.

Okay, that hasn't quite worked out. Something about to have oopsy Daisy in here, sorry. have gotten There you go that fixes that was just a mistake on my part. So here we go, we've got our container, I mean, our cord, got our image title, our text, and our budget, we really think it's Spanish to the entire width of the browser or the web page or the parent container. And it has. And to overcome that, you have to apply a max width to this card limit, aka the most root element for the card is going to be some inline styling.

And Max dash wave. Obviously, this would generally depend on like the type of imagery you got how wide you want it. I know with the content, I've got 319 pixels, looks good. So if you just go back refresh, there you go. We've got a nice looking card that we can showcase and image, let's say again, again, total, some description about our game, and then a button which could take us to the web page. To download or play our game or check out what we're highlighting and showcasing using cards.

There will be more videos showcasing all the different features of cards because like I said, There's quite a bit to cover. It's more than really what one video should be. If you have any questions about this or anything else in bootstrap or programming in general, feel free to post them at sonar learning code at UK for slash question dot php. There'll be a link in the description to that there'll be another link in the description as well to the source code from this video and source code from every other video in this series. Please rate, comment and subscribe, as it does really help keep the content free Plus, it helps us grow and provide more content to you on a regular basis which is good for everyone. And as usual, thanks for watching and I hope you have a great day.