All right. So it's looking pretty good and we are ready.
We've got our title section styles, our features page, our testimonial part styled, and now it's just a
matter of styling the pricing section down here. And this is a commonly used component on many web sites
that you go to
you’ll see a pricing table. So you don't always have to reinvent the wheel.
And in fact if you remember from earlier on, if we have a look at the Bootstrap examples, you'll see that
one of the examples is just a pricing page that was built using Bootstrap.
So we can actually just copy this component and put it into our web site and style it up, and then customize
the style to our liking.
So let's see how we can do that.
So if you open up the Chrome Developer Tools and you click on this arrow, then we can start selecting
the parts that we want.
Now there's quite a few different divs around here.
For example there's this top Pricing header.
There's this part which is the entire body and then there's like sort of down here, which is a container
that contains the footer as well as the pricing table.
But if we navigate to around here, we've got this card deck that includes nothing but just the pricing
table.
So that's basically what we want.
And if you click on the dropdown menu you can see that this is what it contains.
So let's take a closer look at this.
So if you right click on this card deck and you hit Copy element, and we head over to, again, Code Ply,
and we start a new playground, we can paste it into here,
and of course change our Bootstrap version and now hit run.
And you can see that we've got a ready made pricing table that we can just paste into our project.
Now of course you can change the code as you wish.
So, for example, this button down here, it's a btn-lg outline-primary, so that’s the blue color.
So what if we wanted it to be outline-dark, for example? Then we end up with outline-dark, a black button.
And you can go through this and modify the parts that you want,
and of course change the relevant bits of text to what your company is going to advertise.
But essentially this is a really really quick and easy way of importing and using components.
It's not just Bootstrap examples that you can look at the code from. There’s a web site called Bootsnipp
which I recommend you to take a look at, where they've got snippets of code for all sorts of
different components that you can look at and refer to and see how they were created.
So, for example, if you wanted to look for a, maybe like a log in screen, then you can see that there's
many many different things that people have styled up and created the components.
And you can look at the HTML and the CSS that was needed to create this.
And you can of course incorporate into your own project depending on the licensing for each of these
components.
But, you know, in our case we're learning about Bootstrap,
so, as always, we want to understand what we're doing before we start just blindly copy and pasting code.
So let's try and understand how this pricing table was constructed and create our own using the same
underlying Bootstrap components.
So in the example code that you see here the word that comes up the most often is this word card.
And this is because what they're using here in order to create this pricing table is a Bootstrap component
called Bootstrap cards, and this provides a container that looks something like this.
So you can have an image at the top, a title, some text and a button.
And because in most cases a lot of web sites need something like this,
they’ve made it easy for you to incorporate this using Bootstrap.
So, because they’re a little bit like your HTML, they have a header,
they have a body, and they can also have a footer if you so wish.
So let's head over to our Code Pen and just hit command A,
and we're going to delete all of our existing HTML code.
Now let's create a card from scratch with a header, a body and a footer, and we can do that by following the
documentation code over here.
So the first thing that we’ll need is a div with the class that's card.
So this is going to be a card.
And inside here we're going to have a card header, a card body, and a card footer.
So that's going to be three divs and the first one is going to have the class of card-header.
And then I'm just going to copy and paste this and I'm going to create the other two, which is going
to be card-body and card-footer.
And then if I hit run, it's actually quite hard to see what's going on here,
so I'll add some text.
So, for example, this is the Card Header, Card Body, and Card Footer.
All right.
Let's hit run and you can see that this is what our card currently looks like.
It's taking up the full width of the screen, which is why it’s going from edge to edge styling the different
sections slightly differently.
So the header has this little shadow appear, and it's highlighted in a sort of light grey color, and the
body is white.
So I'm going to go ahead and delete this last div which is the card footer, which we don't really need,
and I'm just going to copy the rest of the code so that we can again transplant it into our web site.
So, in the pricing section, just below the title section and the subtitle, I'm going to paste our card
in here and I'm going to delete where it says Card Header and Card Body.
Now we're going to need three of these because we have three pricing plans at the moment, and each
of them are going to be a single Bootstrap card, just as they did over here in their pricing example.
So let's go ahead and copy and paste this twice more, so that we have three cards, and I'm going to move
some of this content over.
So for example Chihuahua is going to be in the card header.
That's the name of the pricing plan. And the rest of this content is going to be inside the card body.
And we're going to do the same for the other two
pricing tiers.
All right.
So let's just go ahead and beautify, and we're done.
All right, so let's hit save and see what this looks like as it is.
And you can see that, similar to what we saw on Code Ply,
they’re actually taking up the full width of the page at the moment.
Now, we need to change that to make them stack side by side, like so.
Now, in the case of this Bootstrap example, what they've done is, they used this class called a card deck.
So let me show you what that does.
So all we need is a div that is going to go around all three of our cards and it's going to have the
class of card-deck.
And then I'm going to move this closing div all the way down to here, so that all three of our cards
go inside the card-deck div.
So now if we hit save and we head over to our web site and refresh,
then you can see that automatically, by wrapping all of our cards inside a card deck,
they get distributed evenly across the width of the web site and they also end up with the same height.
Now there’s just one problem with card decks.
They're not quite as adaptable as the Bootstrap grid system.
Now, if we take a look at the Bootstrap docs for cards, you can see that they've already got you sorted.
So under Using grid markup, you can see that you can actually place these cards inside our beloved Bootstrap
grid system in order to size them accordingly to how responsive you want your web site to be.
So we should really know how to do this.
But here's something new to challenge us.
How can you make the third card become 100 percent at the iPad width, so basically medium and below,
but keep the other two only 50 percent, but only when you get onto the full mobile sized do you make
all three 100 percent the width of the screen?
So at this point you’ve already seen and know quite a lot about Bootstrap grids,
so I'm going to leave this to you as a challenge.
So pause the video now and see if you can complete this challenge.
All right.
So this is a little bit different.
So it might have been quite challenging but let's see if you got it right.
So let's go through the solution now.
The first thing that you need for any sort of grid system to work is, you need a div class of row, so
I'm going to replace card-deck with row in this case, because it's a little bit easier to work with
in our case. Now the next thing that we need to do is to wrap each of our cards inside a Bootstrap grid.
So I'm going to create another div and I'm going to give this a class of col-LG-4, because by
default,
when we're on the largest sizes, so laptop and desktop sizes, I want each card to take up four units, so
that's a third of the page.
And that behavior I really want to have for all three cards.
So I'm going to do the same for the other two as well.
col-lg-4 for the second card, and also
and also for our last card. Let’s just beautify that.
All right. Cool.
So now that means that on a laptop and desktop it should take up a third of the width.
Now let's drill in a little bit deeper and specify what we want on iPad which is the medium size.
So on the medium size we want the top two to take up half of the width.
So that's going to be col-md-6, and I'm going to apply that to this one as well.
So these two are going to be 50 percent on iPad.
But the last one is either going to be col-md-12 to say that on the medium sizes it should
take up a full 12 units or the full width or, if you remember, if you don't specify any columns it just
defaults to 100 percent.
So that means any size that's below large is just going to be 100 percent.
And in this case any size below medium is going to be a 100 percent.
So now if you hit save and refresh and we start going down to our iPad size, you can see that we've
got one, two and three.
And then finally to our mobile size, one, two, three.
So that's looking pretty neat.
Now the next challenge I have for you is, I want you to make these buttons match the Bootstrap example
styles.
So have it the same as these buttons, so, namely, they're going to take up the full width of the card.
The first one’s going to be an outline button, the second two are going to be solid buttons,
and it's all going to have the dark theme.
So pause the video and see if you can complete this challenge.
All right. So this one should be easy, because we've done this quite a few times.
So let's head into our HTML and start adding some more Bootstrap classes.
So our button currently doesn't have any classes.
So we need to add some.
And we're going to add btn so that it styles it as a Bootstrap button.
And then we're going to have btn-lg to specify that we want the larger button, and then we're going
to say btn-block so that the button takes up the full width of the card.
And finally the first one is going to be a btn-outline-dark button, and the other two buttons are
going to have pretty much the same classes,
apart from the fact that they're not going to be outline buttons, and they're going to be just
btn-dark as in the solid buttons.
So let's hit save and let's refresh and, voila, our beautiful buttons have appeared.
So now all we need to do is just to change the CSS a little bit to customize the layout and the text.
So the first thing I want to do is I want to add a little bit of padding from all sides. So let's head
into
styles.css,
and the part that I'm going to put the padding on is this pricing section.
So I'm going to scroll down here and I'm going to add the pricing section
and here I'm going to target the pricing selector. Let’s just check the spelling, pricing, pricing, looks
good.
And then I'm going to add that padding which is going to be roughly around 100 pixels, all four sides,
and that gives it a little bit more space and it looks a lot nicer.
Now it's rare that you want this kind of static amount of padding on all sizes,
but I find that with the pricing plan, even on mobile, you need a little bit of space on all four sides,
so I think it works quite well.
Now of course if you feel different to how I feel then feel free to change it to however you want it
to,
but I quite like the way that this is spaced out.
All right.
So the next thing I'm going to do is I'm going to add a little bit of padding around each of these columns
that holds a card, so that we push it down away from this title section, and also give them a bit more
space from each other.
So let's go ahead into index.html and give each of these columns a class name.
So I'm just going to call this pricing-column,
and I'm going to paste this class across all three cards.
All right.
So now let's hit save and we can go ahead and select that pricing-column, and then we're going to add
some padding in here.
So the amount I'm going to add is roughly around, I think, 3 percent from the top and bottom, and then
just 2 percent from the left and right,
so from each of the cards.
So now if we refresh,
you can see that there's a healthy bit of space that moves the pricing table away from this title,
and also we have a little bit more space between each of the cards.
Now, the last thing I want to do is just to make all the content inside the cards center aligned, because
our buttons are center aligned,
and it looks kind of weird when it's all left aligned and it's not lined up with the button.
So, in order to do that, I can go into the pricing section and change the text-align property to center,
hit save and refresh,
and this is our beautiful pricing section. And you can see that took really very little effort at all.
And you should now understand how each of these cards work, and all the components that we put inside,
for example the button or the card header.
So this is a very very simple pricing page that we've created ourselves without having to rely on the
example code.
And you can see that we're pretty close to what theirs looks like.
And that didn't really take very long at all.
Now, in the next lesson we're going to talk about some more advanced CSS rather than Bootstrap, and it's
so that we can try and get our image to go behind this feature section so that it can cut it off at
around this point because at the moment this is a little bit too big,
and I want the section to end right about here,
so we have to move this image behind this feature section.
So we're going to talk about the z-index and the CSS stacking order.
All of that is yet to come.
And I'll see you on the next lesson.