All right. So it's looking pretty good and we are ready. 1
We've got our title section styles, our features page, our testimonial part styled, and now it's just a 2
matter of styling the pricing section down here. And this is a commonly used component on many web sites 3
that you go to 4
you’ll see a pricing table. So you don't always have to reinvent the wheel. 5
And in fact if you remember from earlier on, if we have a look at the Bootstrap examples, you'll see that 6
one of the examples is just a pricing page that was built using Bootstrap. 7
So we can actually just copy this component and put it into our web site and style it up, and then customize 8
the style to our liking. 9
So let's see how we can do that. 10
So if you open up the Chrome Developer Tools and you click on this arrow, then we can start selecting 11
the parts that we want. 12
Now there's quite a few different divs around here. 13
For example there's this top Pricing header. 14
There's this part which is the entire body and then there's like sort of down here, which is a container 15
that contains the footer as well as the pricing table. 16
But if we navigate to around here, we've got this card deck that includes nothing but just the pricing 17
table. 18
So that's basically what we want. 19
And if you click on the dropdown menu you can see that this is what it contains. 20
So let's take a closer look at this. 21
So if you right click on this card deck and you hit Copy element, and we head over to, again, Code Ply, 22
and we start a new playground, we can paste it into here, 23
and of course change our Bootstrap version and now hit run. 24
And you can see that we've got a ready made pricing table that we can just paste into our project. 25
Now of course you can change the code as you wish. 26
So, for example, this button down here, it's a btn-lg outline-primary, so that’s the blue color. 27
So what if we wanted it to be outline-dark, for example? Then we end up with outline-dark, a black button. 28
And you can go through this and modify the parts that you want, 29
and of course change the relevant bits of text to what your company is going to advertise. 30
But essentially this is a really really quick and easy way of importing and using components. 31
It's not just Bootstrap examples that you can look at the code from. There’s a web site called Bootsnipp 32
which I recommend you to take a look at, where they've got snippets of code for all sorts of 33
different components that you can look at and refer to and see how they were created. 34
So, for example, if you wanted to look for a, maybe like a log in screen, then you can see that there's 35
many many different things that people have styled up and created the components. 36
And you can look at the HTML and the CSS that was needed to create this. 37
And you can of course incorporate into your own project depending on the licensing for each of these 38
components. 39
But, you know, in our case we're learning about Bootstrap, 40
so, as always, we want to understand what we're doing before we start just blindly copy and pasting code. 41
So let's try and understand how this pricing table was constructed and create our own using the same 42
underlying Bootstrap components. 43
So in the example code that you see here the word that comes up the most often is this word card. 44
And this is because what they're using here in order to create this pricing table is a Bootstrap component 45
called Bootstrap cards, and this provides a container that looks something like this. 46
So you can have an image at the top, a title, some text and a button. 47
And because in most cases a lot of web sites need something like this, 48
they’ve made it easy for you to incorporate this using Bootstrap. 49
So, because they’re a little bit like your HTML, they have a header, 50
they have a body, and they can also have a footer if you so wish. 51
So let's head over to our Code Pen and just hit command A, 52
and we're going to delete all of our existing HTML code. 53
Now let's create a card from scratch with a header, a body and a footer, and we can do that by following the 54
documentation code over here. 55
So the first thing that we’ll need is a div with the class that's card. 56
So this is going to be a card. 57
And inside here we're going to have a card header, a card body, and a card footer. 58
So that's going to be three divs and the first one is going to have the class of card-header. 59
And then I'm just going to copy and paste this and I'm going to create the other two, which is going 60
to be card-body and card-footer. 61
And then if I hit run, it's actually quite hard to see what's going on here, 62
so I'll add some text. 63
So, for example, this is the Card Header, Card Body, and Card Footer. 64
All right. 65
Let's hit run and you can see that this is what our card currently looks like. 66
It's taking up the full width of the screen, which is why it’s going from edge to edge styling the different 67
sections slightly differently. 68
So the header has this little shadow appear, and it's highlighted in a sort of light grey color, and the 69
body is white. 70
So I'm going to go ahead and delete this last div which is the card footer, which we don't really need, 71
and I'm just going to copy the rest of the code so that we can again transplant it into our web site. 72
So, in the pricing section, just below the title section and the subtitle, I'm going to paste our card 73
in here and I'm going to delete where it says Card Header and Card Body. 74
Now we're going to need three of these because we have three pricing plans at the moment, and each 75
of them are going to be a single Bootstrap card, just as they did over here in their pricing example. 76
So let's go ahead and copy and paste this twice more, so that we have three cards, and I'm going to move 77
some of this content over. 78
So for example Chihuahua is going to be in the card header. 79
That's the name of the pricing plan. And the rest of this content is going to be inside the card body. 80
And we're going to do the same for the other two 81
pricing tiers. 82
All right. 83
So let's just go ahead and beautify, and we're done. 84
All right, so let's hit save and see what this looks like as it is. 85
And you can see that, similar to what we saw on Code Ply, 86
they’re actually taking up the full width of the page at the moment. 87
Now, we need to change that to make them stack side by side, like so. 88
Now, in the case of this Bootstrap example, what they've done is, they used this class called a card deck. 89
So let me show you what that does. 90
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 91
class of card-deck. 92
And then I'm going to move this closing div all the way down to here, so that all three of our cards 93
go inside the card-deck div. 94
So now if we hit save and we head over to our web site and refresh, 95
then you can see that automatically, by wrapping all of our cards inside a card deck, 96
they get distributed evenly across the width of the web site and they also end up with the same height. 97
Now there’s just one problem with card decks. 98
They're not quite as adaptable as the Bootstrap grid system. 99
Now, if we take a look at the Bootstrap docs for cards, you can see that they've already got you sorted. 100
So under Using grid markup, you can see that you can actually place these cards inside our beloved Bootstrap 101
grid system in order to size them accordingly to how responsive you want your web site to be. 102
So we should really know how to do this. 103
But here's something new to challenge us. 104
How can you make the third card become 100 percent at the iPad width, so basically medium and below, 105
but keep the other two only 50 percent, but only when you get onto the full mobile sized do you make 106
all three 100 percent the width of the screen? 107
So at this point you’ve already seen and know quite a lot about Bootstrap grids, 108
so I'm going to leave this to you as a challenge. 109
So pause the video now and see if you can complete this challenge. 110
All right. 111
So this is a little bit different. 112
So it might have been quite challenging but let's see if you got it right. 113
So let's go through the solution now. 114
The first thing that you need for any sort of grid system to work is, you need a div class of row, so 115
I'm going to replace card-deck with row in this case, because it's a little bit easier to work with 116
in our case. Now the next thing that we need to do is to wrap each of our cards inside a Bootstrap grid. 117
So I'm going to create another div and I'm going to give this a class of col-LG-4, because by 118
default, 119
when we're on the largest sizes, so laptop and desktop sizes, I want each card to take up four units, so 120
that's a third of the page. 121
And that behavior I really want to have for all three cards. 122
So I'm going to do the same for the other two as well. 123
col-lg-4 for the second card, and also 124
and also for our last card. Let’s just beautify that. 125
All right. Cool. 126
So now that means that on a laptop and desktop it should take up a third of the width. 127
Now let's drill in a little bit deeper and specify what we want on iPad which is the medium size. 128
So on the medium size we want the top two to take up half of the width. 129
So that's going to be col-md-6, and I'm going to apply that to this one as well. 130
So these two are going to be 50 percent on iPad. 131
But the last one is either going to be col-md-12 to say that on the medium sizes it should 132
take up a full 12 units or the full width or, if you remember, if you don't specify any columns it just 133
defaults to 100 percent. 134
So that means any size that's below large is just going to be 100 percent. 135
And in this case any size below medium is going to be a 100 percent. 136
So now if you hit save and refresh and we start going down to our iPad size, you can see that we've 137
got one, two and three. 138
And then finally to our mobile size, one, two, three. 139
So that's looking pretty neat. 140
Now the next challenge I have for you is, I want you to make these buttons match the Bootstrap example 141
styles. 142
So have it the same as these buttons, so, namely, they're going to take up the full width of the card. 143
The first one’s going to be an outline button, the second two are going to be solid buttons, 144
and it's all going to have the dark theme. 145
So pause the video and see if you can complete this challenge. 146
All right. So this one should be easy, because we've done this quite a few times. 147
So let's head into our HTML and start adding some more Bootstrap classes. 148
So our button currently doesn't have any classes. 149
So we need to add some. 150
And we're going to add btn so that it styles it as a Bootstrap button. 151
And then we're going to have btn-lg to specify that we want the larger button, and then we're going 152
to say btn-block so that the button takes up the full width of the card. 153
And finally the first one is going to be a btn-outline-dark button, and the other two buttons are 154
going to have pretty much the same classes, 155
apart from the fact that they're not going to be outline buttons, and they're going to be just 156
btn-dark as in the solid buttons. 157
So let's hit save and let's refresh and, voila, our beautiful buttons have appeared. 158
So now all we need to do is just to change the CSS a little bit to customize the layout and the text. 159
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 160
into 161
styles.css, 162
and the part that I'm going to put the padding on is this pricing section. 163
So I'm going to scroll down here and I'm going to add the pricing section 164
and here I'm going to target the pricing selector. Let’s just check the spelling, pricing, pricing, looks 165
good. 166
And then I'm going to add that padding which is going to be roughly around 100 pixels, all four sides, 167
and that gives it a little bit more space and it looks a lot nicer. 168
Now it's rare that you want this kind of static amount of padding on all sizes, 169
but I find that with the pricing plan, even on mobile, you need a little bit of space on all four sides, 170
so I think it works quite well. 171
Now of course if you feel different to how I feel then feel free to change it to however you want it 172
to, 173
but I quite like the way that this is spaced out. 174
All right. 175
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 176
that holds a card, so that we push it down away from this title section, and also give them a bit more 177
space from each other. 178
So let's go ahead into index.html and give each of these columns a class name. 179
So I'm just going to call this pricing-column, 180
and I'm going to paste this class across all three cards. 181
All right. 182
So now let's hit save and we can go ahead and select that pricing-column, and then we're going to add 183
some padding in here. 184
So the amount I'm going to add is roughly around, I think, 3 percent from the top and bottom, and then 185
just 2 percent from the left and right, 186
so from each of the cards. 187
So now if we refresh, 188
you can see that there's a healthy bit of space that moves the pricing table away from this title, 189
and also we have a little bit more space between each of the cards. 190
Now, the last thing I want to do is just to make all the content inside the cards center aligned, because 191
our buttons are center aligned, 192
and it looks kind of weird when it's all left aligned and it's not lined up with the button. 193
So, in order to do that, I can go into the pricing section and change the text-align property to center, 194
hit save and refresh, 195
and this is our beautiful pricing section. And you can see that took really very little effort at all. 196
And you should now understand how each of these cards work, and all the components that we put inside, 197
for example the button or the card header. 198
So this is a very very simple pricing page that we've created ourselves without having to rely on the 199
example code. 200
And you can see that we're pretty close to what theirs looks like. 201
And that didn't really take very long at all. 202
Now, in the next lesson we're going to talk about some more advanced CSS rather than Bootstrap, and it's 203
so that we can try and get our image to go behind this feature section so that it can cut it off at 204
around this point because at the moment this is a little bit too big, 205
and I want the section to end right about here, 206
so we have to move this image behind this feature section. 207
So we're going to talk about the z-index and the CSS stacking order. 208
All of that is yet to come. 209
And I'll see you on the next lesson.