Instructor: Hey guys.
In this section we're gonna be learning
about the Bootstrap framework.
And this is one of many external CSS layout systems
but this is probably one of the most popular
and the one that you'll most likely to come across
out in the wild.
Bootstrap, as I said is a CSSS framework
created in 2010 by two Twitter developers,
Mark Otto and Jacob Thornton.
Now, the power of Bootstrap and the reason why
it became so popular is it contained pre-made CSSS files
which you can simply include into your project
in order to use their prebuilt components and styling.
For example, if you wanted to have some tags
in your website, you could create a look like this
by simply adding a few classes to your HTML.
On top of that, one of the biggest reasons
why Bootstrap took off is because of their 12 column
layout system built on top of Flexbox
that makes it really easy to create responsive websites
and websites that simply just work
and look great on mobile as well as desktop.
The so-called mobile first approach.
So how exactly does it work?
Well, let's say you had a button which just said home.
You can see that the standard button rendered from HTML
doesn't look fantastic
but if we included just five classes,
which come from the Bootstrap CSS...
So we include the prebuilt CSS into our project
and we add the styling and the components
by adding these classes to our HTML,
then all of a sudden what you'll end up with
is something that looks beautiful and pre-styled like this.
And because we don't have to worry
about writing all of this CSS code
all we need to know is which classes we need to add
to our HTML, then it makes everything so much easier
and so much quicker when we want to build components
into our website.
Now, as I mentioned
Bootstrap is a type of CSS framework.
What exactly are these?
Well, they're pre-made CSS files
which you can include into your projects.
If we had a look at the Bootstrap GitHub
and because Bootstrap is completely open source
then all of the code is visible
and you can see it's got styling defined
for all of the different components.
For example, this is inside the card component
and it's got classes that define
what a card body should look like,
what kind of layout it should have,
what kind of color it should have
as well as what the card title should look like,
subtitle and it's got all of this predefined CSS
which we can simply insert straight into our HTML.
Now, the two most popular external CSS frameworks
are Bootstrap and Foundation, but there are lots more
like MUI and Tailwind and a whole bunch more.
And the reason why they're so great is because
they allow us to add in pre-built components
and develop websites quickly and efficiently.
If we look at the usage percentages across the internet
you can see that the biggest CSS external framework
is still Bootstrap with close to 80% of the market share.
But just because we learn about Bootstrap,
it doesn't mean that everything
we learned about CSS is null and void.
In fact, if you look at the top here
when we look at the absolute usage percentages
of all of the different frameworks across the internet,
you can see the largest percentage are still websites
that don't use any external CSS frameworks.
What does it mean
when there are no CSS frameworks being used?
Well, it means you're probably using native CSS
like Flexbox and Grid and Float
and all of the great things that we learnt before.
So Bootstrap doesn't replace any of that knowledge
and in fact, we should be in a situation
where we don't actually need to depend
on any sort of external framework,
but they are really useful
when we wanna develop websites quickly
and easily and we don't wanna spend a ton of time
designing our websites
because it comes with all of the pre-made styling
and all of the styling rules that we can easily conform to
by using their components.
So what are the pros of external CSS frameworks?
Well, they're easy and they're fast to use,
and you get a ton of pre-built components
like this pricing plan
which took us ages to build ourselves.
And you also get really consistent styling
across your website.
It's almost like you hired a professional developer
who kept everything looking on brand.
And finally you have really good browser compatibility
because they've tested all of the different browsers,
Safari, Chrome, Brave,
and whichever browsers that your user might be using
so you don't actually have to do
all of this complicated testing,
you can just trust that it works out of the box.
Now, what are some of the downsides of CSS frameworks?
Well, one of the biggest downsides
is something called class bloat.
Remember previously we've mentioned
that it's a really good idea to separate structure
from style where we said that HTML is for structure.
So adding in elements that describe what the purpose is
and CSS is for style.
Using external CSS frameworks
because we're adding everything into the classes,
then very quickly you end up with what's called class bloat
where you have a lot of styling
going into the actual HTML file
and it looks a lot less clean
than if we had just used something like Grid or Flexbox
where we have all of our predefined classes
and we go easy on the classes
that we add into our HTML file.
The other downside is customization.
If you want to build a website where you wanna have
full control over every pixel and layout
and everything to be exactly the way you designed it
then external CSS frameworks is probably not the way to go
because in order to customize each and every component
it can be really time consuming.
So when should you use these CSS frameworks
like Bootstrap and when should you not?
Well, when you are building
a mobile first responsive website
that you want to put online very quickly
and access beautiful components
designed by professional designers
keeping everything on your website looking slick and uniform
then you probably want to consider using Bootstrap.
But if you're building a very simple website
where you just need HTML CSS and you can quickly throw it up
or if you're building a really complex custom design website
and you want complete control over the design
then it's probably not a good idea
to use an external CSS framework like Bootstrap.
So we've spoken so much about the pros and cons,
when to use when not to use, but how do you actually use it?
Well, one of the easiest ways
is to include it via a CDN link.
We've seen how we can use the link tag
in order to add our style sheets, and in a similar way,
we can use these link tags that simply gets hold
of the style sheet from an external resource.
So in this case it's through a CDN
which stands for Content Delivery Network.
And what these are is little hubs
all across the entire world
and it knows where your users are located
so when they load up your website
and try to access this particular CSS file
that contains all of the Bootstrap code,
then it can find the closest location
with the shortest distance
to the server that has that content.
And that just means that even though
this has to be downloaded from somewhere
it can be delivered to your user
and rendered very, very quickly.
And from our point of view as developers
all we need to do is simply include this link
into the head section of our HTML
and if we want any of the functionality
like dropdown menus or clickable buttons
then we wanna include the Bootstrap script
just before the end of the body section.
So somewhere right about here.
Now let's go ahead and try and exercise
and see if we can upgrade our website quickly
by using Bootstrap.
Download 11.0 Bootstrap Intro.
And if you open it inside of VS Code, open the index.html,
you can see there are four to-dos for you to complete.
And once you've completed all of these four steps
you should end up with a card
that displays a sunflower image
and this is one of the pre-built Bootstrap components.
Now how are you gonna do this?
Well, firstly, you can head over to getbootstrap.com
which is the main Bootstrap website.
And then I want you to include
the Bootstrap files using CDN.
You only need the CSS file
through this link element for now.
And then I want you to go into the documentation
if you want to look up anything regarding the card component
which is all the way down here
in components under the card section.
Now you know what the goal should look like.
You've got all of the resources to get started
and you should be able to work through
each of the to-do's one by one.
Pause the video and see if you can complete this challenge.
All right, hopefully you've given that a go
and you've seen that the Bootstrap card
has some example code
which you can straight up just drop into your file.
If you haven't given this a go,
pause the video now don't continue,
because things will get harder
and harder as we go on in the course.
And if you just watch the videos,
eventually at some point things are not gonna make sense
because you haven't had the practice.
Make things easy for your future self
by putting in lots of effort and practice now.
All right, enough said.
First thing, let's walk through the solution together
and hopefully you can check it against your work.
Now the first thing we're gonna do
is add the Bootstrap link, which comes from the homepage
and we just want this first link
that is going to include the style sheet.
And you can see this is a link
with a relationship or style sheet.
So instead of using our own style sheet
we're now using the Bootstrap CSS.
And if you're wondering what that MIN stands for
it's basically a file where all of the spaces are taken away
so that it's as short as possible so it loads up quicker
because there's no spaces and everything's all jumbled
which is impossible for humans to read
but it works just fine for the computer.
To do number two is to add the Bootstrap prebuilt card.
So if we go into our docs and find our card component
you can see the first example is pretty much
the card we wanna build.
If we look at the goal, we've got our card title,
some example text, a button, and an image.
And this is exactly the same as this example.
So let's copy the HTML and paste it into here
under to do number two.
Now let's check our work.
Let's show it in preview and see what it looks like.
It looks pretty good other than the fact
that the image is pretty much completely broken.
So step three is to change the image source
to display the flower JPEG image.
The image is right here
and right now the source is completely empty
'cause it's an example.
Let's go ahead and change it to our image,
which is flower.jpeg.
You see it show up immediately, and as always with images
let's add a alt text so that people with screen readers
know what it's all about.
All right, now the final step is a little bit
of a revision step because I wanted you to use Flexbox
to center the card in the vertical and horizontal center.
If we take a look at this URL on our browser
you can see it's stuck all the way to the top left
which is default HTML layout.
But if we want it right here in the middle
then we're gonna need to use some Flexbox magic
and we're gonna do that
inside an internal style element right here
under to do number four.
What do we need to target?
Well, we need to target the entire card
and the topmost level is this Flex Container.
The reason why it's of class Flex Container
is because this comes from the Bootstrap CSS
and it's got some styling in there
that defines that container but we can always override it.
And this is really, really important.
When we want to override a particular Bootstrap style
we have to make sure that it's more specific.
So either it goes inside an internal style element
or it goes inside an inline style property.
Or if we're using our standard external CSS
and we use a link linking to, I dunno, say
/CSS/style.CSS and we have a style.CSS file
somewhere in our project
then you gotta make sure that your custom CSS file
occurs below the Bootstrap link
that way this is first looked at
and then the browser looks at your custom style sheet
and you can override any of the classes
that come from Bootstrap.
So this is an important point to remember for the future
when you are creating your own custom style sheets.
All right, so now in order to override the style here
now we might be building on top of existing Bootstrap styles
or we might be specifying something
they don't even care about
and it's not defined in the Bootstrap CSS at all.
In our case, we wanna change this Flex container
to display Flex because we know
that this is one of the simplest ways
to center anything in CSS.
And the first thing we need to change
is the justify content set to center.
And the second one is align items set to center.
And finally, we need to make sure
that the entire container takes up the full height
and not just some proportion of the height
that's enough for the content.
So let's set the height to 100 viewport height.
And now you can see our card is perfectly centered
in the middle using Flexbox.
It's a component that we've borrowed and customized
from Bootstrap, and you can see how easy it was
and quick to create this layout
by leveraging the power of Bootstrap.
In the next lesson, we're gonna dive deeper into Bootstrap
and we're gonna look at
how the Bootstrap 12 column layout system
actually works in practice.
So for all of that and more I'll see you in the next lesson.