Original subtitles

Hey, guys.

In this section, we're going to 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 CSS 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 CSS files,

which you can simply include into your project in order to use their pre-built 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 pre-built

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 the 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

want to develop websites quickly and easily and we don't want to 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 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 use something like Grid or Flexbox, where we have all of our predefined classes and

we go easy on the classes that we add in to our HTML file.

The other downside is customization.

If you want to build a website where you want to 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 the 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 and 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 stylesheets,

and in a similar way, we can use these link tags that simply gets hold of the stylesheet from an external

resource.

So in this case it's through 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 want to include

the bootstrap script just before the end of the body section.

So somewhere right about here.

Now let's go ahead and try an 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 TODO's 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 going to do this?

Well, firstly, you're going to 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 TODOs

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 going to 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 going to do is add the bootstrap link, which comes from the homepage,

and we just want this first link that is going to include the stylesheet.

And you can see this is a link with a relationship of stylesheet.

So instead of using our own stylesheet, 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.

TODO Number 2 is to add the bootstrap pre-built 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 want to 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 TODO Number 2.

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 because 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 an 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 going to need to use some Flexbox magic and

we're going to do that inside an internal style element right here under TODO Number 4.

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 don't know, say,

./css/style.css and we have style.css file somewhere in our project, then you've got to 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're 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 want to 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 100vh,

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 going to dive deeper into bootstrap and we're going to 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.