Bootstrap 5 Crash Course Tutorial #10 - Cards

all right then gang so the next component we're going to look at is the card component now cards have been around as components for a long long time and they're basically just a small content container with a drop shadow and sometimes a border so that the content looks like a card on the page again they're really flexible and there's a lot of things we can do with cards if i scroll down the page here we can see a few different examples we have one with an image on the top some text and then a button at the bottom a more simple one with just some text and links at the bottom some with lists inside them and i could keep scrolling for ages to see all the different examples you can also colorize them using the theme colors so definitely have a play around with these for our website we'll use cards to show the different pricing options for the ebook and also place them into a grid layout all right so the cards on our design are going to go underneath this section right here so we're going to have three cards in a row with three different pricing options so let's start to flesh this out right here underneath pricing plans so first of all we need a section and this is going to have an id of pricing and remember when we click on the pricing thing right here it's going to take us to this section on the page so it's going to scoot us down and actually that happens nicely and you'll see that later on it kind of scrolls to the position on the screen that's a built-in effect in bootstrap so we have this section i'm also going to give this a couple of classes so we'll say class is equal to bg hyphen light that gives this kind of like a really light gray color and then also the margin top is going to be strength five just to pull it down from this section a little bit okay so inside this section right here first of all i'll do a container to contain all of the content so container and it's going to be lg so 100 width until large screens then it goes into container mode okay so in this container the first thing i'll do is a div and i'm going to centralize the text using this text center class we have an h2 pricing plans then we have a paragraph lead to make it a bit bigger and text muted so it says choose a pricing plan to suit you if i save it we should see that over here voila okay so now we just need the cards underneath it and they are going to go inside a grid so we need a row first of all so let's do a div with a class of row and also we'll say m y is gonna be strength five so this row is gonna have margin top and bottom all right so i'm also gonna paste in a couple of other classes so the first class let me just paste these in is going to be align item center and remember that aligns the content vertically in the center and this one justify content center justifies the content horizontally in the center okay so we have this row and we need our different cards inside it so let's do the first card i'm going to do a div with a class of call hyphen 8 then also call hyphen lg 4 and then call hyphen xl3 like so so what this means is that initially for extra small screens to begin with is going to be eight columns in width that's kind of like the default width and then when you get to large screens it's going to be four columns in width then on extra large it's going to be three columns in width okay so inside here we want to create our card so we need to div and the first thing we do is give this a class of card all cards have this class then i want to inside that do some card body or text inside it and the way we do that is by creating a div with a class of card hyphen body so card body is all of the chunky me inside the card if you like okay so inside the card body i'm gonna say we want to centralize the text so i'll give this a text center class as well and also give this a bit of padding so py hyphen four so up and down this has a bit of padding all right so if i just say hello inside here now let me just save this and do that so we can see this on the screen that there is the default card so it's just like a square with a bit of a rounded corner and it's got a border as well now i want to take the border off so i'm going to come to the card right here and i can say border hyphen 0 and that strips away the border so if i save it now then we should see the card without butter awesome okay so instead of this we want a few things inside this card first of all i want a title so i'm going to do an h4 and give this a class of card title and that styles it as a card title so this title is going to say starter edition so this is kind of like the title of the pricing plan if you like the starter edition and then underneath that i'll do a paragraph with a class of lead and also a class of card hyphen subtitle okay so again this just styles it as a card subtitle and inside here i'll say ebook download only okay so let's take a look so far at what this looks like okay looking pretty good so the next thing i'm going to do is the price and again that's going to go inside a paragraph tag i'm going to make the text quite big so i'll say display hyphen 5 and also give this margin top and bottom so m y hyphen four and then i'll say text is gonna be the primary color so text type in primary and then the font weight is gonna be bold so fw hyphen bold and then we'll put a price in the middle i'm just going to say dollars 12.99 and then after the price we'll do some card text so i'll say p card hyphen text again a bootstrap class to style this and also mx hyphen five to give it some margin left and right the text is going to be the muted gray color so text muted and then also by default i want to display as none but then when it gets to a large size screen we are going to show it so i'll say d hyphen lg hyphen block so to begin with on smaller screens it will be display none when it reaches larger screens it's going to display as block okay and inside here we'll just do some lorem ipsum so lorem 8 for example and tab and finally we'll do a button so an anchor tag and then a class of btn also a class of btn outline to make an outline button and then color it primary and then also btn hyphen lg to make it a large button and then finally margin top is going to be three okay so this is the button href is just harsh i must say bye now so this card right here has a card class we strip away the border then we have the card body which is where all the kind of meaty stuff goes inside the card and we centralize the text we have a card title we have a card subtitle then we just have the price which is nothing special just to display five then the card text and then we have a button at the bottom to say bye now so if i save this hopefully it's gonna look alright and it does so there we go my friends that is your first card but we need two more now instead of you watching me type these out from scratch again i'm gonna paste these in one at a time so let me do the next one and then i'll go through it so let me paste this card in it's slightly different but almost the same the only real thing that's different is this bit right here where we specify the columns because the first one would say call 8 by default and then call 4 on large and then 3 on extra large whereas this one is called 9 by default so a little bit bigger then on large screens it's going to be 4 which is the same but then it never goes to three it never gets smaller for extra large screens the rest down here is virtually the same we have the card class however we don't strip out the border this time we color it the primary color and we give it a thickness of two now we say right here as well we have a card header now we didn't have that up here we just went straight into the card body but above that this time we have a card header and what that does is place a little strip at the top of the card and we'll see that in a second and we say text primary so it's blue and we say this is the most popular plan then after that we have the card body text center py5 the card titled the card subtitle we have the price the display is a little bit bigger display four instead of five remember one is the biggest five is the smallest and then we have the card text again and we have the button at the bottom all right so in fact just so there's the same amount of text on each one let me copy this and i'm going to paste that in here just so it's roughly the same okay so save that and preview and now we can see this card right here so it's a bit bigger and it's styled differently now at the minute it's not in the same row as this so i think we might have put this in the wrong place so we have this card right here and it's yep the row starts here and it ends here so let me give us some room there and take this card and we need to paste it after this card right here and now it should be in the same row so let's give that a will now save this and yep now it's in the same row so we can see now it's a bit bigger it's a bit wider on extra large screens as we go down to smaller size screens we can see it becomes a similar size and then on very small screens they kind of stack on top of each other and notice again this is a bit bigger because we said call nine instead of call eight all right so let me now just paste in the last one so let me grab that and paste it in and walk you through this and to be honest this is probably going to be exactly the same as the first one yes it is so collate then on large screens four then three on extra large strip out the border of the card we have the card body the text center the py the title the subtitle then we have the price we have this thing right here which is the card text and then we have the button at the bottom let me save that and preview and make this into a larger screen and this is what it looks like so we have the smaller cards on the left and right and then the bigger one in the middle and by the way remember this thing the card header that is this thing at the top that is a card header okay so that's looking pretty good but there's one more thing i want to do and that's just to strip out the gap right here so we can control the gap inside each row individually and all we have to do is use a very simple utility class so i'm going to come to the row and then say g for gap and then hyphen zero and that means zero gap now if i save this we can see the gap has gone i can go all the way up to five to make it a big gap if i save that you're gonna see a bigger gap so i'm gonna strip it out because i think it looks good when there's no gap save that and yep that looks pretty good to me so there is our pricing plans and all nice and responsive as well and again there's loads of variations like we said before of cards all you need to do is search for the card component and you can see which card you'd kind of like to get copy the code and just play around with it because you can add images at the top if you prefer as well there's different colors and variations we can use if we scroll right down here i think we saw these before but we could see that we can have different color cards like this as well loads of variations so definitely have a play around with them

Channel: The Net Ninja

Views: 15,293

Keywords: bootstrap, bootstrap 5, bootstrap 5 tutorial, bootstrap tutorial, tutorial, bootstrap 5 crash course, bootstrap crash course, what is bootstrap, bootstrap 5 new features, crash course, responsive design, responsive development, CSS, bootstrap sass, bootstrap setup, install bootstrap, bootstrap getting started, bootstrap guide, bootstrap 5 guide, bootstrap 4 vs bootstrap 5

Id: NRoET8-8cbw

Length: 12min 23sec (743 seconds)

Published: Tue Jun 22 2021