Hey, guys. 1
In this lesson, we're going to be learning about one of the most powerful features of Bootstrap and 2
one of the biggest reasons why we would be using Bootstrap in our project in the first place, 3
and that is the concept of the Bootstrap Components. The pre-built, pre-styled components like buttons, 4
and cards, and carousels, and a whole load of beautiful things that we get access to simply by adding 5
in a Bootstrap class into our HTML. 6
Let's start with one of the most commonly used components, which is the Bootstrap button. 7
And this is a really good place to start because you also see the default Bootstrap styling and the 8
color scheme. In most of the components that you'll get access to through Bootstrap, 9
if you want to give it a particular color, 10
it's really easy to access all of these default colors by simply using their name. In most cases in a 11
Bootstrap design website, the primary button, the "Go to", the "Buy", or the "Contact Us", or 12
"Download" whatever will be this blue color and you can access all of the other colors through each of 13
their Bootstrap names and they give you a little bit of a hint as to what they're used for. 14
So success is usually like an okay button. Danger, 15
maybe if you click this button, something really bad happens, or Warning, etcetera. And you get access 16
to this button and this button styling, simply by creating a button HTML element, giving it the class 17
"btn" for a Bootstrap button, and then adding the class for the color scheme from this list that you 18
want to choose. 19
Let's try this out. 20
Go ahead and download the starting files from the 11.2 Bootstrap Components zipped file and once you've 21
extracted it, and opened it inside VS Code, 22
head over to index.html. 23
Now here you'll notice that I've already added in the Bootstrap link, we've got a style section which 24
we can add custom CSS to, and in the body area, I want you to use the Bootstrap documentation. 25
So if you go to the Bootstrap main website at getbootstrap.com, go to Docs and then scroll down to 26
the Components find the Buttons, and I want you to put in a green button that says, okay, somewhere 27
onto this website. 28
Remember, you can preview it in real time to see if it's working and pause the video now and complete 29
this challenge. 30
All right. 31
So this is pretty simple. 32
We have a button which we said is going to say, "Okay". 33
And in order to style it using Bootstrap, the first thing we do is add the btn class and you can see 34
automatically the font changes, the background color changes, 35
and then we said we wanted to have a green button. 36
So the green button is "btn-success". 37
So let's go ahead and add btn-success, 38
and once we're done, you can see we've got a beautiful green button with a hover animation with nice 39
styling, a good size, rounded corners, all of that goodness without doing a lot of work at all. 40
It was super, super simple to create this. And this should give you a taste of what's yet to come. 41
The next component I want to talk about is a really useful one, which is the Card which you already 42
saw in the previous lessons' exercise. 43
And as always, all we need to do is go to that particular Component's page and then we can simply copy 44
the code, paste it into our website and replace certain parts of the code, such as the image source (src) 45
or the alt text. 46
Now, one component that you're probably going to be using whenever you're building a website is a 47
navbar and the Bootstrap navbars are some of the best-designed navbars I've seen, 48
and it also is super easy to include simply using their example snippet codes. 49
If you head over to the Navbar, you can read on how it works and also what's some of the examples 50
they have, for example, this one with a Search bar with some dropdowns, and this one which describes 51
how you can have the brand at the top left or if you want an image, image and text brand and you can 52
scroll through this to find the kind of navbar you want to create and to use the example code. 53
Now another area for the navbars is if you head over to Examples and you go to the Headers Section, 54
you can see some even more fancily laid out navbars over here. In order to show you some of the different 55
types of components and how they can be used in real life. 56
We are going to be building a Moving startup's website. 57
They're called Move It, which is pretty simple and it's got a one page website with many different 58
sections and I'm going to show you just how easy it is to build this entire fully fledged website using 59
just Bootstrap Components. 60
So the first thing we need is that navbar, and you'll notice that I've taken the navbar that is pretty 61
much this standard one. 62
So it's got a field which you can search for, say the postcode, 63
if our company works in your area, it's got some dropdown menus, it's got some other little areas 64
which you can click on. 65
So let's go ahead and copy the code for the starting point of our navbar and let's paste it into the 66
body of our code. 67
So you can see as soon as I've done that, I've got my navbar show up, 68
but one thing you'll notice as soon as you start playing around with it is when a Bootstrap navbar 69
is in a smaller width, it will automatically show a hamburger menu and that menu should have a dropdown 70
with all of the buttons from the navigation bar. 71
Now why is our button not working? 72
Now remember previously I said when we get started with Bootstrap there's two links to include via CDN. 73
The first one is the style sheet and that gives us all of the styling, 74
but the second one is the scripting code that gives us all of the functionality because this gives us 75
access to the Bootstrap JavaScript code. 76
Now we don't need to understand anything about JavaScript just yet in order to use it. 77
All we need to do is copy that link and go to, right at the end, just before the closing body tag and 78
paste that script link in there. 79
And you can see as soon as I've done that, my buttons now work, my dropdowns work and all of these 80
clicking functionality bits start working and this again comes straight out of the box from Bootstrap. 81
Let's take a look at this website in a larger format. 82
By opening Inside Chrome, you can see that for the most part, these two nav bars look pretty similar. 83
All I did is got rid of some of the components and changed some of the other things. 84
For example, this button is disabled so that users can't click on it, 85
and in our version we actually just got rid of it. 86
We can do that quite easily by finding that button. 87
And you can see the reason why it's not enabled is because it has this class of disabled. 88
So if we get rid of that, then you can see this button is now active once more, but we don't actually 89
want it at all. 90
So let's delete that entire list item 91
and now, 92
we only have three links, 93
Home, Link and Dropdown. 94
So let's rename those links to About and Services. 95
And again, because this is just a simple anchor tag, you know exactly how to work with this. 96
So the first one is Link, 97
so we'll change this to About, and the Dropdown instead of reading Dropdown will say it's called Services. 98
And you can imagine in the future we would have our different services in the dropdown, like Moving 99
with a van, Moving by, Hauling everything yourself, or something else. 100
But this is just an example of how our navbar could look. 101
Now the first part of the navbar is the "navbar-brand" and we can see that right up here. 102
We've got an anchor tag which is called the navbar-brand, for example, 103
if I change it to move it, then that's going to change our brand text. 104
In addition, we can also have an image in here so you can simply just add an image, give it a source, 105
maybe let's use one of the images we already have in our folder, 106
for example, the dog.jpeg. 107
Now, because this image is super, super large and we haven't really resized it, then it's not really 108
going to work in the navbar, but you can always change this. 109
So let's change the height to just 20px. 110
Then you can see our navbar brand image show up right there. 111
Now in our case, we're not going to use an image. 112
Instead, I'm going to delete that tag and I'm going to use an SVG. 113
This is a good time to show you the SVGs which are available through Bootstrap. 114
So if you go back to the home page and you click on icons, you can see you got all of these free icons 115
for you to use in any of your websites, paid, monetized, whatever, 116
and it's really hard actually, sometimes finding well-designed icons that you can simply add to your 117
project without having to pay royalties and buy it from a designer. 118
So this is also really, really neat and you can search through the different icons by using the filter. 119
So the one that I found is actually this box with seams on it, which looks very much like a moving 120
company box to me. 121
And you can either simply just copy the SVG straight up into your HTML. 122
So if I paste it in here, you'll see it show up right there. 123
Alternatively, you can also include it as an image and you set the source to the SVG that you have 124
saved in your folder, which is right here. 125
I'm going to use the image in the folder by setting it as a source and I'm going to set the alt text 126
to "moveit brand icon," and then I'm going to change the height to, let's say 30 so that it's a little 127
bit bigger. 128
And we now have a navbar that looks the same as the example. 129
Now on the right hand side, there is a form here and I know we haven't spoken much about forms that's 130
all yet to come. 131
When we learn more about how to have the actual form functionality later on, especially in the back-end 132
section, this is all going to come in really, really handy. 133
But for now, we're just going to change this Search bar from Search to say, Postcode and Check. 134
So that's pretty easy to find. 135
You can either use command + F to find those words, or you can scroll through your code to find it as well. 136
Let's change the button to say, Check and let's change the placeholder for that search bar into, say, 137
Postcode. 138
There we go. 139
And now we've completed our navbar. 140
And if you had a design, all of that from scratch and all of the CSS that's included and you can see 141
just how much CSS there is actually, if you click on one of these items, you can see the nav link 142
that I just clicked on has all the padding defined, has all of this defined, has toggle styling, 143
and that's just one part of this entire navbar. 144
So you can see just how much time we're saving ourselves and we're able to leverage a professional design 145
and create something that looks really contemporary and beautiful. 146
Now let's move on to the next section. 147
And this entire section is made up of different components. 148
So maybe an h1 heading, a paragraph, two buttons and an image, 149
but if we want to just take this layout, I actually got it from the examples. 150
The examples area is really, really good for taking bits and bobs of the different code snippets, 151
the different Components that they've already styled and created for you, and simply putting it into 152
your website where it makes sense. 153
So this is a Hero, 154
and as you can see, it's this one. 155
It's pretty much exactly the same title, text, two buttons and an image, and everything is styled beautifully 156
already for you in order to use it. 157
All we need to do is right-click 158
on Inspect, 159
and now we want to expand our elements area. 160
And what I tend to do is just to go upwards on the hover until the highlight actually highlights the 161
area that I want, which is this div right here. 162
Let's go ahead and copy this div and put it into our code just below our navbar. 163
Now once I've done that, you can see we've got our centered screenshot, text, button and an image. 164
Let's first fix that image so we can see what things should look like. 165
And their source is from the Bootstrap Docs, 166
but instead, we want to use the one of the moving van so that we can show our users what our services 167
are all about. 168
And now all we have to do is just to replace the text. 169
If you look inside the starting file folder, there is a file called website-text, and here you can 170
simply copy all of the website text and replace the relevant parts. 171
The h1 should say "Move With Joy" and then we've got a long bit of text which we're going to replace with 172
our paragraph. 173
So let's just copy everything in that paragraph element and replace it. 174
And then our buttons should say, "Get a quote" and "Contact Us". 175
And now we have a Hero Section done in two seconds. 176
Okay, maybe it was a little bit longer, but you can probably see just how powerful this is. 177
So now let's keep going. 178
In the next section of our example website, we've got some features and this is where you would usually 179
tell people what's so special about your particular startup? 180
Well, our startup is really professional, 181
we are available countrywide, and we have a personal touch. 182
And you might have guessed this comes from the Bootstrap Examples page. 183
They have a section called Features, and this first feature is perfect for our needs. 184
And I think a lot of Bootstrap design kind of comes from Apple, because when you look at the Apple website, 185
a lot of the buttons, the shading, the kind of fonts, they all look really, really similar to the 186
Bootstrap Components. 187
And I think this is probably one of their design inspirations and we can get that simply with some copy 188
and pasting and a little bit of customization. 189
Again, let's go into the section of the features that we want and then we're going to keep hovering 190
up until we find the div that contains all the things that we want, right-click, copy, copy element, 191
and we're going to put it below the previous section. 192
Now let's take a look at our good work. 193
We have our columns with icons and we've got three features. 194
Let's change the text of all of this 195
first, and I'm going to fast-forward through this section so you don't have to watch me copy-paste. 196
And there you have it. 197
We've now got all the text replaced and we should have all of our copy, which is the text for your 198
website inserted into the relevant parts. 199
Now, one thing that you'll notice is very obvious is that this part does not look like this part. 200
And it also doesn't look like the part that we copied the code from. 201
So what is going on here? 202
Well, as I mentioned, most of the Bootstrap Styling and Components come from Bootstrap classes. 203
For example, this one looks like this because it has a class of "icon-link". 204
But sometimes, sometimes we might want to customize the styling that we get so that we have some of our 205
own design features on top of what Bootstrap already addresses. 206
If we right-click on these styled squares from the example website, and if you scroll up to find the 207
div where it highlights the entire square, you can see that this div actually has some custom styling. 208
Now the reason why we know it's custom is because all of the default Bootstrap classes come from something 209
like utilities.css, for example the background gradient, for example the margins, the align, 210
etcetera. 211
But the parts that come from custom CSS for this page is going to have a file that looks like this. 212
So for this features page, they've created some custom CSS and in that custom CSS file they've got 213
little bits of CSS just to make things look a little bit more custom rather than coming from Bootstrap. 214
So the part that we're missing, as you can see, is something called feature-icon. 215
So if we copy all of this CSS and put it into our CSS here between the style tags, then we look at 216
our website, we can see those squares styled the way we want. 217
Now what we're going to have to do is to remove the SVG in the examples and replace it with our own 218
SVG's that we've downloaded. 219
So let's go ahead and find the first one which is here. 220
Let's go ahead and delete this and simply add an image with the source set as the first one, which 221
is the "briefcase," because we're saying how professional we are. 222
So let's change the alt text and the second SVG will replace with the image that is the "bus-front," 223
and this is because we're saying that our services are available countrywide. 224
And then for the final feature icon, we're going to change it to the "chat-square-heart," 225
to say how much of a personal touch our company has, and now we should have all of the icons set 226
up, but they're a little bit small. 227
So in order to get it to the right size, we'll do the same thing that we did with the icon up there. 228
We'll give it a different height. 229
So let's go ahead and add a height of 30 to each of these SVGs and now they are all correctly sized. 230
And while you've been doing the copy and pasting, you might notice there's another SVG here, which 231
is the chevron-right, 232
which is this little forward button here. 233
We can also replace that with our images, which is the "chevron-right," 234
and we'll give it an alt text and copy and paste this to all three places where they exist. 235
Now, the reason why the SVGs that we copied from the features section doesn't work on our website is 236
because SVGs can be installed in many different ways. 237
We can download it just as I have done and put them into the project folder and you can access it through 238
the SVG element or through an image element. 239
Alternatively, you can simply copy the entire HTML code. For a clean look, 240
I've simply downloaded each of the SVGs into our resources folder and added them as images. 241
It really is up to you how you want to do it. 242
Now that you've seen a little bit about how we can use the different code snippets from the Bootstrap 243
Components or from Bootstrap Examples, I've got an exercise for you. 244
We know that the next section after Features, is our Carousel and it's simply a component that allows 245
you to scroll through different pages. 246
Now the one that I've chosen here has an indicator at the bottom, so you can easily switch to whichever 247
page you want. 248
It's got the side buttons here so you can go left and right and all it has are just three large images, 249
but be aware that the images don't go all the way to the edge. 250
Instead, they are aligned with the rest of the content. 251
So have a think about what you've learnt before. 252
Have a read of the Carousel documentation. 253
Find the example that you think looks the most like the outcome and see if you can complete this challenge. 254
Pause the video now. 255
All right. 256
If you completed this challenge successfully, we've now got another section here, which is a Bootstrap 257
Carousel, which is really neat when you want to display some gallery images or maybe you have some 258
testimonials you want users to be able to flip through and maybe you want to show all the members of 259
your team. 260
And if you look inside the carousel example here, you can see there's an example with different text, 261
but the example that I used is actually even simpler than that. 262
It's in the Docs inside the Components. 263
So going back to the Components now, we can take a look at how the carousel works if you want to have 264
a read, 265
But I've chosen one of the basic examples which has an indicator where you can toggle to different pages 266
and we simply have a big image covering the entire carousel. 267
Let's copy this code and paste it into our website. 268
Now when you paste it, you won't see anything happen at all, 269
and the reason is because there's no images, the images are broken and that's because the images have 270
no source set by default. 271
So let's go ahead and set our carousel image source. 272
So the first one we're going to set to the "couple" and, 273
the second one we're going to set as the "dog". 274
This is almost like an evolution of a family going from a couple to a dog to a family. 275
And finally, we have all of our photos set up. 276
And now if we take a look, you can see our carousel is showing and it's working, but it's maybe a 277
little bit too big. 278
It's kind of taking up more than the height of the website. 279
And that's because this is set to cover the entire width. 280
If you remember from previous lessons, one of the best components to size everything evenly is from 281
the Layout Section, and it is our Container. 282
We know that we're going to get a uniform look if we put things inside a container div. 283
So that's exactly what we're going to do. 284
I'm going to create a div and I'm going to set it to class of "container" and I'm going to move the final 285
closing div just below the carousel. 286
And now when we go back you can see our carousel is nicely enclosed inside the container and you can 287
see that no matter which size I change to, we've always got a consistent look with that container responsiveness. 288
We're now ready for the final section of our website, which is just the footer. 289
And I haven't done a lot of work on the footer, 290
I've simply gone into the Snippets, found the Footers Section, picked one that I liked and then hit 291
inspect to find the starting point of the footer and pasted that code into the correct position. 292
I'm not going to modify this too much because you already know how you can do that, but just look at 293
how easy it was to create this beautiful website in a matter of minutes using Bootstrap Components. 294
The Components are really, really handy, as are the Snippets and the Example code because they allow 295
you to pick a style out of their palette that you like and simply add it into your website. 296
And this makes it super easy to build well-thought out designs very, very quickly. 297
In addition to the Layout classes that Bootstrap gives you the Component classes, there are also 298
Utility classes and Helpers. 299
And one really important aspect of this is Spacing. 300
Very often when we're designing websites, we want to add margin, we want to add padding. 301
And this is all spacing, right? 302
As you might remember from previous lessons, padding sets up the part between the item and the containing 303
div. 304
So this part and the margin sets up the spacing between the outline of your item and any other components. 305
So you can set all of those values using very simple Bootstrap notation. 306
So let's run through this quickly. 307
It's a format where you have the property, which sides you want, a dash and then the size. 308
And this is really easy to figure out. 309
So for example, if I wanted to set margin only to the top of my element, then I can say "mt". So 310
M for classes that set margin. 311
T that sets margin-top or padding-top and then using a dash, I can say how much margin I want. 312
So 0 is eliminating the margin and then we can add a little bit more, a little bit more, a little 313
bit more. 314
So if I had mt - 5, that's usually the maximum that you'll need. 315
And then there's this concept of X and Y. 316
So if you want to set the margin for both the top and the bottom, you'll use the x-axis. 317
And if you want to set the margin or padding for the left and the right, then you can use that y-axis. 318
So maybe you'll have my -3. 319
It looks like my three, but it actually says, "Set the margin for the y-axis to a size of 3." 320
It's relatively easy once you understand it, but when you just see it in the code, it can be really, 321
really confusing. 322
But now you should be able to see that in our footer we've got mb-2 and that of course stands for adding 323
margin to the bottom 324
and it's a size of 2. 325
That's how we can decode all this. 326
Now, the final neat trick I want to show you in this lesson is how you can add "Dark Mode" to your website, 327
flipping the colors around by simply adding one property into your HTML tag. 328
If you go into the Customize Section, go into Color modes, you'll see that Bootstrap now supports 329
Dark mode and it can flip the entire 330
project's theme to the opposite color, simply by setting the data bootstrap theme to dark (data-bs-theme="dark). 331
Let's try that out on our website. 332
Let's go all the way up to our HTML after the language is set. 333
Let's change the theme to "dark," and you can see our entire website has now been reformatted to a dark 334
theme, which is super neat 335
if this is the design that you want, or if later on when we learn about JavaScript and we can put in 336
buttons to change the theme of our website to whichever the user prefers so that the user can change 337
that theme to whichever they prefer. 338
So now you're starting to see how powerful Bootstrap can be using these Examples, using Snippets, 339
using the pre-built Components and Styling as well as the Layout System. 340
But if you've tried to build websites before, you've probably come across full page themes completely 341
built-out for you. 342
For example, with Squarespace. 343
The catch, though, is you're going to have to pay something like Â£12 a month or $10 a month in order 344
to just be able to use these templates of theirs and to have your website on the Internet. 345
What I want to show you is that with Bootstrap there are a whole bunch of free themes and paid for themes 346
that you can use that are one-off costs for you to build beautiful websites and simply customize the 347
themes 348
now that you know all about Bootstrap. One handy template is from W3 schools and they have some of 349
the most common website layouts like a blog. 350
You might have a sidebar main, a footer or what a portfolio might look like or what a web page might 351
look like. 352
A social website. 353
Etcetera. 354
Etcetera. 355
And they've built these simple examples for you to be able to simply take the code and customize. In 356
order for you to use their examples, 357
you can simply do, as we have done, find a template that you want to replicate and then customize 358
it and maybe add some more custom CSS in order to achieve the look that you want. 359
If you think that these are a little bit basic because they are, the idea is they're mostly for layout, 360
getting the big structure done using the Bootstrap Layout System. 361
There are a lot of other beautiful Bootstrap themes that are more complete in a way, starting with 362
the official Bootstrap themes itself. 363
If we head back to the main Bootstrap website, click on Themes, 364
you can see that they've got these professionally designed websites and many of them look absolutely 365
incredible. 366
So depending on what it is that you're trying to build, you could use one of these templates. 367
But the only downside to this is they are in fact all paid for because there's a lot of work that's 368
gone into it, right? 369
But these are mostly one-off costs, 370
and if you don't want to pay to get a theme, you can always search through Google for free Bootstrap 371
templates and you'll find a whole range of websites that have free and paid-for Bootstrap websites. 372
And again, you can do the same thing as we've been doing so far in this lesson. 373
Just getting hold of the components you want, customizing it and getting the design that you're looking 374
for. 375
So hopefully in this lesson you've seen that Bootstrap can be incredibly easy to create components and 376
features in our websites very, very quickly, and it has consistent and beautiful design to boot. 377
And if you've really taken to Bootstrap and web design, you can even create and sell your own themes. 378
If you really enjoy working with Bootstrap and designing websites and creating websites using the Bootstrap 379
Components, you can create the templates yourself and put them onto marketplaces and sell them as a 380
potential source of income. 381
So have a play around with the other components, see what Bootstrap themes are out there. 382
And in the next lesson, we've got the final project for this section where you're going to be building 383
a fully-fledged startup website or by yourself using your knowledge of Bootstrap. 384
So for all of that and more, I'll see you there.