Hey, guys. 1
In this section, we're going to be learning about the Bootstrap Framework. 2
And this is one of many external CSS layout systems, but this is probably one of the most popular and 3
the one that you'll most likely to come across out in the wild. 4
Bootstrap, as I said, is a CSS framework created in 2010 by two Twitter developers Mark Otto and Jacob 5
Thornton. 6
Now the power of Bootstrap and the reason why it became so popular is it contained pre-made CSS files, 7
which you can simply include into your project in order to use their pre-built components and styling. 8
For example, if you wanted to have some tags in your website, you could create a look like this by 9
simply adding a few classes to your HTML. 10
On top of that, one of the biggest reasons why Bootstrap took off is because of their 12-column layout 11
system built on top of Flexbox 12
that makes it really easy to create responsive websites and websites that simply just work and look 13
great on mobile as well as desktop, the so-called mobile-first approach. 14
So how exactly does it work? 15
Well, let's say you had a button which just said "Home", 16
you can see that the standard button rendered from HTML doesn't look fantastic. 17
But if we included just five classes which come from the Bootstrap CSS, so we include the pre-built 18
CSS into our project and we add the styling and the components by adding these classes to our HTML, 19
then all of a sudden what you'll end up with is something that looks beautiful and pre-styled like this. 20
And because we don't have to worry about writing all of the CSS code, all we need to know is which 21
classes we need to add to our HTML. 22
Then it makes everything so much easier and so much quicker when we want to build components into our 23
website. 24
Now, as I mentioned, bootstrap is a type of CSS framework, 25
what exactly are these? 26
Well, they're pre-made CSS files which you can include into your projects. 27
If we had a look at the bootstrap GitHub and because bootstrap is completely open source, then all 28
of the code is visible and you can see it's got styling defined for all of the different components. 29
For example, this is inside the Card Component and it's got classes that define what a card-body should 30
look like, what kind of layout it should have, what kind of color it should have, as well as what 31
the card title should look like, subtitle, 32
and it's got all of this predefined CSS, which we can simply insert straight into our HTML. 33
Now, the two most popular external CSS frameworks are bootstrap and foundation, but there are lots 34
more like MUI and Tailwind and a whole bunch more. 35
And the reason why they're so great is because they allow us to add in pre-built components and develop 36
websites quickly and efficiently. 37
If we look at the usage percentages across the Internet, you can see that the biggest CSS external 38
framework is still Bootstrap with close to 80% of the market share. 39
But just because we learn about bootstrap, it doesn't mean that everything we learned about CSS is 40
null and void. 41
In fact, if you look at the top here, when we look at the absolute usage percentages of all of the 42
different frameworks across the Internet, you can see the largest percentage are still websites that 43
don't use any external CSS frameworks. 44
What does it mean when there are no CSS frameworks being used? 45
Well, it means you're probably using native CSS like Flexbox and Grid and Float and all of the great 46
things that we learnt before. 47
So bootstrap doesn't replace any of that knowledge and in fact we should be in a situation where we 48
don't actually need to depend on any sort of external framework, but they are really useful when we 49
want to develop websites quickly and easily and we don't want to spend a ton of time designing our websites 50
because it comes with all of the pre-made styling and all of the styling rules that we can easily conform 51
to by using their components. 52
So what are the pros of external CSS frameworks? 53
Well, they're easy and they're fast to use and you get a ton of pre-built components like this pricing 54
plan, which took us ages to build ourselves. 55
And you also get really consistent styling across your website. 56
It's almost like you hired a professional developer who kept everything looking on brand and finally 57
you have really good browser compatibility because they've tested all of the different browsers Safari, 58
Chrome, Brave and whichever browsers that 59
your user might be using. 60
So you don't actually have to do all of this complicated testing. 61
You can just trust that it works out of the box. 62
Now, what are some of the downsides of CSS Frameworks? 63
Well, one of the biggest downsides is something called class bloat. 64
Remember previously we mentioned that it's a really good idea to separate structure from style, where 65
we said that HTML is for structure. 66
So adding in elements that describe what the purpose is, and CSS is for style. Using external CSS frameworks 67
because we're adding everything into the classes, then very quickly you end up with what's called class 68
bloat, where you have a lot of styling going into the actual HTML file and it looks a lot less clean 69
than if we had just use something like Grid or Flexbox, where we have all of our predefined classes and 70
we go easy on the classes that we add in to our HTML file. 71
The other downside is customization. 72
If you want to build a website where you want to have full control over every pixel and layout and everything 73
to be exactly the way you designed it, then external CSS frameworks is probably not the way to go because 74
in order to customize each and every component, it can be really time consuming. 75
So when should you use the CSS frameworks like Bootstrap and when should you not? 76
Well, when you are building a mobile-first responsive website that you want to put online very quickly 77
and access beautiful components designed by professional designers, keeping everything on your website 78
looking slick and uniform, then you probably want to consider using bootstrap. 79
But if you're building a very simple website where you just need HTML and CSS and you can quickly throw 80
it up, or if you're building a really complex custom design website and you want complete control over 81
the design, then it's probably not a good idea to use an external CSS framework like Bootstrap. 82
So we've spoken so much about the pros and cons, when to use, when not to use, but how do you actually 83
use it? 84
Well, one of the easiest ways is to include it via a CDN link. 85
We've seen how we can use the link tag in order to add our stylesheets, 86
and in a similar way, we can use these link tags that simply gets hold of the stylesheet from an external 87
resource. 88
So in this case it's through CDN, which stands for Content Delivery Network. 89
And what these are is little hubs all across the entire world and it knows where your users are located. 90
So when they load up your website and try to access this particular CSS file that contains all of the 91
bootstrap code, then it can find the closest location with the shortest distance to the server that 92
has that content. 93
And that just means that even though this has to be downloaded from somewhere, it can be delivered 94
to your user and rendered very, very quickly. 95
And from our point of view as developers, all we need to do is simply include this link into the head 96
section of our HTML. 97
And if we want any of the functionality like dropdown menus or clickable buttons, then we want to include 98
the bootstrap script just before the end of the body section. 99
So somewhere right about here. 100
Now let's go ahead and try an exercise and see if we can upgrade our website quickly by using bootstrap. 101
Download 11.0 Bootstrap Intro, and if you open it inside of VS Code, open the index.html, you can see 102
there are four TODO's for you to complete. 103
And once you've completed all of these four steps, you should end up with a card that displays a sunflower 104
image. 105
And this is one of the pre-built bootstrap components. 106
Now how are you going to do this? 107
Well, firstly, you're going to head over to getbootstrap.com, which is the main bootstrap website, 108
and then I want you to include the bootstrap files using CDN. 109
You only need the CSS file through this link element for now. 110
And then I want you to go into the documentation if you want to look up anything regarding the Card 111
Component, which is all the way down here in Components under the Card Section. 112
Now you know what the goal should look like. 113
You've got all of the resources to get started and you should be able to work through each of the TODOs 114
one by one. 115
Pause the video and see if you can complete this challenge. 116
All right. 117
Hopefully, you've given that a go and you've seen that the Bootstrap Card has some example code, which 118
you can straight up just drop into your file. 119
If you haven't given this a go, pause the video now. 120
Don't continue because things will get harder and harder as we go on in the course, 121
and if you just watch the videos, eventually, at some point things are not going to make sense because 122
you haven't had the practice. 123
Make things easy for your future self by putting in lots of effort and practice now. 124
All right, enough said. 125
First thing, let's walk through the solution together and hopefully you can check it against your work. 126
Now the first thing we're going to do is add the bootstrap link, which comes from the homepage, 127
and we just want this first link that is going to include the stylesheet. 128
And you can see this is a link with a relationship of stylesheet. 129
So instead of using our own stylesheet, we're now using the bootstrap CSS. 130
And if you're wondering what that "min" stands for, it's basically a file where all of the spaces are 131
taken away so that it's as short as possible. 132
So it loads up quicker because there's no spaces and everything's all jumbled, which is impossible 133
for humans to read, 134
but it works just fine for the computer. 135
TODO Number 2 is to add the bootstrap pre-built card. 136
So if we go into our docs and find our Card Component, you can see the first example is pretty much 137
the card we want to build. 138
If we look at the goal, we've got our Card title, some example text, a button and an image, and 139
this is exactly the same as this example. 140
So let's copy the HTML and paste it into here under TODO Number 2. 141
Now let's check our work, let's show it in preview and see what it looks like. 142
It looks pretty good 143
other than the fact that the image is pretty much completely broken. 144
So step three is to change the image source to display the flower JPEG image. 145
The image is right here and right now the source is completely empty because it's an example. 146
Let's go ahead and change it to our image, which is flower.jpeg. 147
You see it show up immediately and as always with images, let's add an alt text so that people with 148
screen readers know what it's all about. 149
All right. 150
Now the final step is a little bit of a revision step because I wanted you to use Flexbox to center 151
the card in the vertical and horizontal center. 152
If we take a look at this URL on our browser, you can see it's stuck all the way to the top left, 153
which is default HTML layout, 154
but if we want it right here in the middle, then we're going to need to use some Flexbox magic and 155
we're going to do that inside an internal style element right here under TODO Number 4. 156
What do we need to target? 157
Well, we need to target the entire card, 158
and the topmost level is this "flex-container." 159
The reason why it's of class, flex-container, is because this comes from the Bootstrap CSS and it's got 160
some styling in there that defines that container, 161
but we can always override it. 162
And this is really, really important when we want to override a particular bootstrap style, we have 163
to make sure that it's more specific. 164
So either it goes inside an internal style element or it goes inside an inline style property, or if 165
we're using our standard external CSS and we use a link linking to, I don't know, say, 166
./css/style.css and we have style.css file somewhere in our project, then you've got to make sure 167
that your custom CSS file occurs below the bootstrap link. 168
That way this is first looked at and then the browser looks at your custom style sheet and you can override 169
any of the classes that come from bootstrap. 170
So this is an important point to remember for the future when you're creating your own custom style 171
sheets. 172
All right, so now in order to override the style here, now we might be building on top of existing 173
bootstrap styles or we might be specifying something they don't even care about, and it's not defined 174
in the bootstrap CSS at all. 175
In our case, we want to change this flex container to "display: flex" because we know that this is one 176
of the simplest ways to center anything in CSS. 177
And the first thing we need to change is the justify-content set to center, 178
and the second one is align-items set to center, 179
and finally, we need to make sure that the entire container takes up the full height and not just some 180
proportion 181
of the height 182
that's enough for the content. 183
So let's set the height to 100vh, 184
and now you can see our card is perfectly centered in the middle using Flexbox. 185
It's a component that we've borrowed and customized from Bootstrap, and you can see how easy it was, 186
and quick to create this layout by leveraging the power of Bootstrap. 187
In the next lesson, we're going to dive deeper into bootstrap and we're going to look at how the bootstrap. 188
12-column layout system actually works in practice. 189
So for all of that and more, I'll see you in the next lesson.