Original subtitles

0 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.