Create Stylish Card Components with Bootstrap

[00:00] Bootstrap has many different cards, varying from cards with images to cards with lists and a mixture between the 2. Going along with research done at the start, I'm gonna be going with cards with images, a title, a little text, and a button. This section, we are going to give the ID of cards [00:21] and a div with a class of container. Add a top margin of 5 as well. Add in an h two, and I'll name it Popular hikes. Create a div with a row, and this is where our cards will be held. To create the cards, start with a div with a class of card. Inside of that [00:40] div, create an image element with a source and pick an image from the images slash cards folder. Inside of that, create a div with a class of card dash body. The card body is going to hold our h5, a p tag, and an a tag with a class of button [01:00] and the color of button dash primary. As you can see, the card class adds a thin border around our card. The card is very large, so let's shrink that down a little bit. [01:21] Add a height of 200 to make it a little bit more reasonable. Also, make our image cover the available space so it doesn't stretch by adding object dash fit dash cover. Duplicate this 2 more times and add our other images. [01:46] Make them only span the width of 3 columns by adding col dash 3 to the cards, and don't forget to add your alts. [02:09] We're getting there, but let's clean them up a little bit more by centering them and adding a little bit of spacing. In the div with the class of row, center the cars by adding justify content center, add a gap of 4, and add a small top margin of 3. We're getting there, but the spacing around our images [02:29] isn't very appealing, and the corners aren't the same as the rest of our site. In the classes of our image elements, add a small margin on the top of 2 and round the images with rounded. Much better. I use the site alltrails.com for all of my hiking info, so add the title of each hike and a [02:49] little bit about each hike in the paragraph. Each image is named after a different hike, which would make it a little easier to search for. So for the h five, put the name of the hike, and for the p tag, add in some text from the site. For the buttons, have the text be more all trails info and point the h ref to the specific trail on the [03:09] site. These are looking pretty good. The last thing we wanna do is make them responsive on smaller screens. Right now, they will always take up 3 columns no matter how small you get. They get [03:29] very squished and hard to read and just look unpleasant when viewing on mobile. To fix this, make each card span 12 columns, but on the larger screens and higher, make them span 3 columns. Now looking at our page, we can see these span the whole width of our page on anything smaller than [03:48] large screen sizes, but once we hit that breakpoint, they will span 3 columns.