Instructor: Hey guys.
In this lesson we're gonna be learning
about one of the most powerful features of Bootstrap.
And one of the biggest reasons
why we would be using Bootstrap
in our project in the first place.
And that is the concept of the Bootstrap components,
the pre-built, pre-styled components
like buttons, and cards, and carousels.
And a whole load of beautiful things that we get access
to simply by adding in a Bootstrap class into our HTML.
Let's start with one of the most commonly used components,
which is the Bootstrap button.
And this is a really good place to start
because you also see the default Bootstrap styling
and the color scheme.
In most of the components that you'll get access
to through Bootstrap, if you want to give it
a particular color, it's really easy to access
all of these default colors by simply using their name.
In most cases, in a bootstrap designed website,
the primary button, the go-to, the buy or the contact us
or download whatever will be this blue color.
And you can access all of the other colors through each of
their bootstrap names and they give you a little bit
of hint as to what they're used for.
So success is usually like an okay button.
Danger, maybe if you click this button
something really bad happens or warning et cetera.
And you get access to this button and this button styling
simply by creating a button HTML element,
giving it the class BTN for a bootstrap button.
And then adding the class for the color scheme
from this list that you wanna choose.
Let's try this out.
Go ahead and download the starting files
from the 11.2 bootstrap components zip file.
And once you've extracted and opened it inside VS Code,
head over to index.html.
Now here you'll notice that I've already added
in the Bootstrap link.
We've got a style section, which we can add custom CSS to.
And in the body area,
I want you to use the bootstrap documentation.
So if you go to the bootstrap main website
at getbootstrap.com, go to docs
and then scroll down to the components, find the buttons.
And I want you to put in a green button
that says okay somewhere onto this website.
Remember, you can preview it in real time
to see if it's working and pause the video now
and complete this challenge.
All right, so this is pretty simple.
We have a button which we said is going to say okay.
And in order to style it using Bootstrap,
the first thing we do is add the BTN class.
And you can see automatically font changes,
the background color changes.
And then we said we wanted to have a green button.
So the green button is btn-success.
So let's go ahead and add btn-success.
And once we're done, you can see we've got
a beautiful green button with a hover animation
with nice styling, a good size, rounded corners.
All of that goodness without doing a lot of work at all.
It was super, super simple to create this
and this should give you a taste of what's yet to come.
The next component I wanna talk about is
a really useful one, which is the card
which you already saw in the previous lesson's exercise.
And as always, all we need to do is go
to that particular component's page.
And then we can simply copy the code,
paste it into our website and replace certain parts
of the code such as the image source or the alt text.
Now, one component that you're probably gonna be using
whenever you're building a website is a nav bar.
And the bootstrap nav bars are some
of the best designed nav bars I've seen.
And it also is super easy to include,
simply using their example snippet codes.
If you head over to the nav bar,
you can read on how it works.
And also what some of the examples they have are.
For example, this one with a search bar with some dropdowns.
And this one which describes how you can have the brand at
the top left or if you want an image, image and text brand.
And you can scroll through this to find the kind of nav bar,
you want to create and to use the example code.
Now another area for the nav bars is if you head
over to examples and you go to the header section,
you can see some even more
fancily laid out nav bars over here.
In order to show you some of the different types
of components and how they can be used in real life,
we are going to be building a moving startups website.
They're called Move It, which is pretty simple,
and it's got a one-page website
with many different sections.
And I'm gonna show you just how easy it is to build
this entire fully fledged website using
just bootstrap components.
So the first thing we need is that nav bar.
And you'll notice that I've taken the nav bar
that is pretty much this standard one.
So it's got a field which you can search for,
say the postcode if our company works in your area.
It's got some dropdown menus.
It's got some other little areas which you can click on.
So let's go ahead and copy the code for the starting point
of our nav bar and let's paste it into the body of our code.
So you can see as soon as I've done that,
I've got my nav bar show up.
But one thing you'll notice as soon as you start playing
around with it is when a bootstrap nav bar is
in a smaller width, it will automatically show
a hamburger menu and that menu should have
a dropdown with all of the buttons from the navigation bar.
Now why is our button not working?
Now remember previously I said when we get started
with Bootstrap, there's two links to include via CDN.
The first one is the style sheet,
and that gives us all of the styling.
But the second one is the scripting code that gives us all
of the functionality because this gives us access
to the bootstrap JavaScript code.
Now we don't need to understand anything
about JavaScript just yet in order to use it.
All we need to do is copy that link
and go to right at the end just before the closing body tag.
And paste that script link in there.
And you can see, as soon as I've done that,
my buttons now work, my dropdowns work.
And all of these clicking functionality bits start working.
And this again comes straight out of the box from Bootstrap.
Let's take a look at this website in a larger format
by opening it inside Chrome.
You can see that for the most part,
these two nav bars look pretty similar.
All I did is got rid of some of the components
and changed some of the other things.
For example, this button is disabled
so that users can't click on it.
And in our version we actually just got rid of it.
We can do that quite easily by finding that button.
And you can see the reason why it's not enabled is
because it has this class of disabled.
So if we get rid of that,
then you can see this button is now active once more.
But we don't actually want it at all.
So let's delete that entire list item.
And now we only have three links, home, link and dropdown.
So let's rename those links to about and services.
And again, because this is just a simple anchor tag,
you know exactly how to work with this.
So the first one is link.
So we'll change this to about.
And the dropdown instead of reading dropdown
we'll say is called services.
And you can imagine in the future we would have
our different services in the dropdown
like moving with a van, moving by hauling
everything yourself or something else.
But this is just an example of how our nav bar could look.
Now the first part of the nav bar is the nav bar brand
and we can see that right up here we've got an anchor tag,
which is called the nav bar brand.
For example, if I change it to Move It,
then that's going to change our brand text.
In addition, we can also have a image in here
so you can simply just add an image, give it a source.
Maybe let's use one of the images we already have in
our folder, for example, the dog.jpeg.
Now, because this image is super, super large
and we haven't really resized it.
Then it's not really going to work in the nav bar,
but you can always change this.
So let's change the height to just 20 pixels.
Then you can see our nav bar,
brand image show up right there.
Now in our case, we're not going to use an image.
Instead, I'm gonna delete that tag
and I'm gonna use an SVG.
This is a good time to show you the SVGs,
which are available through Bootstrap.
So if you go back to the homepage and you click on icons,
you can see you got all of these free icons for you to use
in any of your websites, paid, monetized, whatever.
And it's really hard
actually sometimes finding well-designed icons
that you can simply add to your project without having
to pay royalties and buy it from a designer.
So this is also really, really neat.
And you can search through the different icons
by using the filter.
So the one that I found is actually this box
with seams on it, which looks very much
like a moving company box to me.
And you can either simply just copy
the SVG straight up into your HTML.
So if I paste it in here,
you'll see it show up right there.
Alternatively, you can also include it as an image.
And you set the source to the SVG
that you have saved in your folder, which is right here.
I'm gonna use the image in the folder
by setting it as a source.
And I'm gonna set the alt text to move it brand icon.
And then I'm going to change the height to let's say 30,
so that it's a little bit bigger.
And we now have a nav bar that looks
the same as the example.
Now on the right hand side, there is a form here.
And I know we haven't spoken much about forms.
That's all yet to come when we learn more about how to have
the actual form functionality later on.
Especially in the backend section,
this is all gonna come in really, really handy.
But for now, we're just going to change this search bar
from search to, say, postcode and check.
So that's pretty easy to find.
You can either use command F to find those words
or you can scroll through your code to find it as well.
Let's change the button to say check
and let's change the placeholder
for that search bar into, say, postcode.
There we go.
And now we've completed our nav bar.
And if you had to design all of that from scratch
and all of the CSS that's included,
and you can see just how much CSS there is actually.
If you click on one of these items,
you can see the nav link that I just clicked on has
all the padding defined, has all of this defined.
Has toggle styling and that's just one part
of this entire nav bar.
So you can see just how much time we're saving ourselves
and we're able to leverage a professional design
and create something that looks
really contemporary and beautiful.
Now let's move on to the next section.
And this entire section is made up of different components,
so maybe an H1 heading, a paragraph,
two buttons and an image.
But if we want to just take this layout,
I actually got it from the examples.
The examples area is really, really good
for taking bits and bobs of the different code snippets,
different components that they've already styled
and created for you and simply putting it
into your website where it makes sense.
So this is a hero, and as you can see, it's this one.
It's pretty much exactly the same,
title, text, two buttons and an image.
And everything is styled beautifully already for you.
In order to use it,
all we need to do is right click on inspect.
And now we want to expand our elements area.
And what I tend to do is just to go upwards on the hover
until the highlight actually highlights
the area that I want, which is this div right here.
Let's go ahead and copy this div
and put it into our code just below our nav bar.
Now, once I've done that,
you can see we've got our centered screenshot,
text, button and an image.
Let's first fix that image so we can see
what things should look like.
And their source is from the bootstrap docs,
but instead we want to use the one of the moving van.
So that we can show our users
what our services are all about.
And now all we have to do is just to replace the text.
If you look inside the starting file folder,
there is a file called website text.
And here you can simply copy all of the website text
and replace the relevant parts.
The H1 should say move with joy.
And then we've got a long bit of text,
which we're going to replace with our paragraph.
So let's just copy everything
in that paragraph element and replace it.
And then our buttons should say, get a quote and contact us.
And now we have a hero section done in two seconds.
Okay, maybe it was a little bit longer,
but you can probably see just how powerful this is.
So now let's keep going.
In the next section of our example website,
we've got some features.
And this is where you would usually tell people
what's so special about your particular startup.
Well, our startup is really professional.
We are available countrywide and we have a personal touch.
And you might have guessed this comes
from the Bootstrap examples page.
They have a section called features
and this first feature is perfect for our needs.
And I think a lot of bootstrap design kind of comes
from Apple because when you look at the Apple website,
a lot of the buttons, the shading, the kind of fonts,
they all look really, really similar
to the Bootstrap components.
And I think this is probably one
of their design inspirations.
And we can get that simply with some copy
and pasting and a little bit of customization.
Again, let's go into the section of the features
that we want and then we're going to keep hovering up
until we find the div that contains
all the things that we want.
Right click copy, copy element
and we're going to put it below the previous section.
Now let's take a look at our good work.
We have our columns with icons
and we've got three features.
Let's change the text of all of this first
and I'm gonna fast forward through this section
so you don't have to watch me copy paste.
And there you have it.
We've now got all the texts replaced
and we should have all of our copy,
which is the text for your website inserted
into the relevant parts.
Now, one thing that you'll notice is very obvious is
that this part does not look like this part.
And it also doesn't look like the part
that we copied the code from.
So what is going on here?
Well, as I mentioned, most of the bootstrap styling
and components come from bootstrap classes.
For example, this one looks like this
because it has a class of icon link.
But sometimes, sometimes we might want to customize
the styling that we get so that we have
some of our own design features
on top of what Bootstrap already addresses.
If we right click on these styled squares
from the example website, and if you scroll up to find
the div where it highlights the entire square,
you can see that this div actually has
some custom styling.
Now, the reason why we know it's custom is
because all of the default bootstrap classes come
from something like utilities.scss.
For example, the background gradient.
For example, the margins, the align, et cetera.
But the parts that come from custom CSS
for this page is going to have a file that looks like this.
So for this features page,
they've created some custom CSS.
And in that custom CSS file,
they've got little bits of CSS just to make things look
a little bit more custom rather than coming from Bootstrap.
So the part that we are missing, as you can see,
is something called feature icon.
So if we copy all of the CSS and put it into our CSS here
between the style tags, then we look at our website,
we can see those squares styled the way we want.
Now what we're gonna have to do is to remove the SVG
in the examples and replace it with
our own SVGs that we've downloaded.
So let's go ahead and find the first one, which is here.
Let's go ahead and delete this and simply add an image
with the source set as the first one,
which is the briefcase,
because we're saying how professional we are.
So let's change the alt text and the second SVG will replace
with the image that is the bus front.
And this is because we're saying
that our services are available countrywide.
And then for the final feature icon,
we're going to change it to the chat square heart
to say how much of a personal touch our company has.
And now we should have all of the icons set up,
but there're a little bit small.
So in order to get it to the right size,
we'll do the same thing that we did with the icon up there.
We'll give it a different height.
So let's go ahead and add a height of 30
to each of these SVGs.
And now they are all correctly sized.
And while you've been doing the copy and pasting,
you might notice there's another SVG here,
which is the chevron right,
which is this little forward button here.
We can also replace that with our images,
which the chevron right.
And we'll give it an alt text and copy and paste
this to all three places where they exist.
Now, the reason why the SVGs that we copied
from the features section doesn't work on our website is
because SVGs can be installed in many different ways.
We can download it just as I have done
and put them into the project folder.
And you can access it through the SVG element
or through an image element.
Alternatively, you can simply copy the entire HTML code.
For a clean look, I've simply downloaded
each of the SVGs into our resources folder
and added them as images.
It really is up to you how you want to do it.
Now that you've seen a little bit about how we can use
the different code snippets from the bootstrap components
or from bootstrap examples, I've got a exercise for you.
We know that the next section
after features is our carousel.
And it's simply a component that allows you
to scroll through different pages.
Now, the one that I've chosen here has an indicator
at the bottom, so you can easily switch
to whichever page you want.
It's got the side buttons here so you can go left and right.
And all it has are just three large images,
but be aware that the images don't go
all the way to the edge.
Instead they are aligned with the rest of the content.
So have a think about what you've learned before,
have a read of the carousel documentation.
Find the example that you think looks
the most like the outcome
and see if you can complete this challenge.
Pause the video now.
All right, if you completed this challenge successfully,
we've now got another section here
which is a bootstrap carousel.
Which is really neat when you want to display
some gallery images or maybe you have some testimonials
you want users to be able to flip through.
Maybe you wanna show all the members of your team.
And if you look inside the carousel example here,
you can see there's an example with different text.
But the example that I use is
actually even simpler than that.
It's in the docs inside the components.
So going back to the components now,
we can take a look at how the carousel works
if you wanna have a read.
But I've chosen one of the basic examples,
which has an indicator where you can toggle
to different pages and we simply have
a big image covering the entire carousel.
Let's copy this code and paste it into our website.
Now when you paste it, you won't see anything happen at all.
And the reason is because there's no images,
the images are broken.
And that's because the images have no source set by default.
So let's go ahead and set our carousel image source.
So the first one we're gonna set to the couple
and the second one we're gonna set as the dog.
This is almost like an evolution of a family going
from a couple to a dog to a family.
And finally, we have all of our photos set up.
And now if we take a look,
you can see our carousel is showing and it's working.
But it's maybe a little bit too big.
It's kind of taking up more than the height of the website
and that's because this is set to cover the entire width.
If you remember from previous lessons,
one of the best components to size everything evenly is
from the layout section and it is our container.
We know that we're gonna get a uniform look
if we put things inside a container div.
So that's exactly what we're gonna do.
I'm gonna create a div and I'm going
to set it to class of container.
And I'm going to move the final closing div
just below the carousel.
And now when we go back, you can see our carousel is
nicely enclosed inside the container.
And you can see that no matter which size I change to,
we've always got a consistent look
with that container responsiveness.
We're now ready for the final section of our website,
which is just the footer.
And I haven't done a lot of work on the footer.
I've simply gone into the snippets,
found the footer section, picked one that I liked.
And then hit inspect to find the starting point
of the footer and pasted that code
into the correct position.
I'm not gonna modify this too much
because you already know how you can do that.
But just look at how easy it was to create
this beautiful website in a matter
of minutes using bootstrap components.
The components are really, really handy
as are the snippets and the example code.
Because they allow you to pick a style out of their palette
that you like and simply add it into your website.
And this makes it super easy to build
well-thought out designs very, very quickly.
In addition to the layout classes
that Bootstrap gives you, the component classes,
there are also utility classes and helpers.
And one really important aspect of this is spacing.
Very often when we're designing websites,
we'll want to add margin, we'll want to add padding,
and this is all spacing.
As you might remember from previous lessons,
padding sets up the part between the item
and the containing div.
So this part and the margin sets up the spacing
between the outline of your item and any other components.
So you can set all of those values using
very simple bootstrap notation.
So let's run through this quickly.
It's a format where you have the property,
which sides you want, a dash, and then the size.
And this is really easy to figure out.
So for example, if I wanted to set margin
only to the top of my element, then I can say mt.
So M for classes that set margin,
T that sets margin top or padding top.
And then using a dash, I can say how much margin I want.
So zero is eliminating the margin,
and then we can add a little bit more,
a little bit more, a little bit more.
So if I had margin top five,
that's usually the maximum that you'll need.
And then there's this concept of X and Y.
So if you want to set the margin
for both the top and the bottom, you'll use the X axis.
And if you wanna set the margin or padding for the left
and the right, then you can use that Y axis.
So maybe you'll have my-3, it looks like my three,
but it actually set the margin
for the Y axis to a size of three.
It's relatively easy once you understand it.
But when you just see it in the code,
it can be really, really confusing.
But now you should be able to see
that in our footer we've got mb-2.
And that, of course, stands for adding margin to the bottom
and it's a size of two.
That's how we can decode all this.
Now, the final neat trick I wanna show you in this lesson is
how you can add dark mode to your website,
flipping the colors around by simply adding one property
into your HTML tag.
If you go into the customized section, go into color modes,
you'll see that Bootstrap now supports dark mode.
And it can flip the entire project's theme
to the opposite color simply by setting
the data bootstrap theme to dark.
Let's try that out on our website.
Let's go all the way up to our HTML.
After the language is set, let's change the theme to dark.
And you can see our entire website has
now been reformatted to a dark theme,
which is super neat if this is the design that you want.
Or if later on when we learn about JavaScript
and we can put in buttons to change the theme of our website
to whichever the user prefers.
So that the user can change that theme
to whichever they prefer.
So now you're starting to see
how powerful Bootstrap can be using
these examples, using snippets,
using the pre-built components and styling
as well as the layout system.
But if you've tried to build websites before,
you've probably come across full page themes
completely built out for you, for example, with Squarespace.
The catch though is you're gonna have to pay something
like 12 pounds a month or $10 a month
in order to just be able to use these templates
of theirs and to have your website on the internet.
What I wanna show you is that with Bootstrap,
there are a whole bunch of free themes and paid for themes
that you can use that are one-off costs
for you to build beautiful websites.
And simply customize the themes
now that you know all about Bootstrap.
One handy template is from W3Schools.
And they have some of the most
common website layouts like a blog.
You might have a sidebar, main, a footer,
or what a portfolio might look like
or what a webpage might look like,
a social website, et cetera, et cetera.
And they've built these simple examples
for you to be able to simply take the code and customize.
In order for you to use their examples,
you can simply do as we have done, find a template
that you wanna replicate and then customize it.
And maybe add some more custom CSS in order
to achieve the look that you want.
If you think that these are a little bit basic
because they are, the idea is they're mostly for layout,
getting the big structure done using
the bootstrap layout system.
There are a lot of other beautiful bootstrap themes
that are more complete in a way,
starting with the official Bootstrap themes itself.
If we head back to the main bootstrap website,
click on themes, you can see that they've got
these professionally designed websites.
And many of them look absolutely incredible.
So depending on what it is that you are trying to build,
you could use one of these templates.
But the only downside to this is they are in fact all paid
for because there's a lot of work that's gone into it.
But these are mostly one-off costs.
And if you don't want to pay to get a theme,
you can always search through Google
for free bootstrap templates.
And you'll find a whole range of websites
that have free and paid for Bootstrap websites.
And again, you can do the same thing
as we've been doing so far in this lesson.
Just getting hold of the components you want,
customizing it and getting the design
that you are looking for.
So hopefully in this lesson you've seen
that Bootstrap can be incredibly easy
to create components and features
in our websites very, very quickly.
And it has consistent and beautiful design to boot.
And if you've really taken to bootstrap and web design,
you can even create and sell your own themes.
If you really enjoy working with Bootstrap
and designing websites and creating websites using
the Bootstrap components,
you can create the templates yourself.
And put them onto marketplaces
and sell them as a potential source of income.
So have a play around with the other components,
see what Bootstrap themes are out there.
And in the next lesson, we've got the final project
for this section where you're going to be building
a fully fledged starter website
all by yourself using your knowledge of Bootstrap.
So for all of that and more, I'll see you there.