Hey, guys.
In this lesson, we're going to 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 a 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, etcetera. 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
want to 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 it, 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, Ok, 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, "Ok".
And in order to style it using Bootstrap, the first thing we do is add the btn class and you can see
automatically the 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 want to talk about is a really useful one, which is the Card which you already
saw in the previous lessons' 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 (src)
or the alt text.
Now, one component that you're probably going to be using whenever you're building a website is a
navbar and the Bootstrap navbars are some of the best-designed navbars I've seen,
and it also is super easy to include simply using their example snippet codes.
If you head over to the Navbar, you can read on how it works and also what's some of the examples
they have, 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 navbar you want to create and to use the example code.
Now another area for the navbars is if you head over to Examples and you go to the Headers Section,
you can see some even more fancily laid out navbars 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 startup's 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 going to 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 navbar, and you'll notice that I've taken the navbar 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 navbar 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 navbar show up,
but one thing you'll notice as soon as you start playing around with it is when a Bootstrap navbar
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 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 will say it's 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 navbar could look.
Now the first part of the navbar is the "navbar-brand" and we can see that right up here.
We've got an anchor tag which is called the Navbar 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 an 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.jpg.
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 navbar, but you can always change this.
So let's change the height to just 20px.
Then you can see our navbar brand image show up right there.
Now in our case, we're not going to use an image,
instead, I'm going to delete that tag and I'm going to 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 home page 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 going to use the image in the folder by setting it as a src, and I'm going to set the alt text
to "moveit 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 navbar 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 back-end
section, this is all going to 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 navbar.
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 navbar.
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,
the 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 navbar.
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 src 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 going to 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 text 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.css, for example the background gradient, for example the margins, the align,
etcetera.
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're missing, as you can see, is something called feature-icon.
So if we copy all of this CSS and put it into our CSS here between the style tags, then when we look at
our website we can see those squares styled the way we want.
Now, what we're going to have to do is to remove the SVG in the examples and replace it with our own
SVG's 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 we 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 they'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 is 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 an 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 learnt 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 and maybe you want to 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 used 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 want to 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 src set by default.
So let's go ahead and set our carousel image src.
So the first one we're going to set to the "couple" and,
the second one we're going to 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 going to get a uniform look if we put things inside a container div.
So that's exactly what we're going to do.
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
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 Footers 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 going to 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 will want to add margin, we will want to add padding,
and this is all spacing, right?
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 0 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 mt - 5, 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 want to 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 3, but it actually says, "Set the margin for the y-axis to a size of 3."
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 2.
That's how we can decode all this.
Now, the final neat trick I want to 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 Customize 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 (data-bs-theme="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 going to have to pay something like Â£12 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 want to 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 W3 schools 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 web page might
look like.
A social website.
Etcetera.
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 want to 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're 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, right?
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 were 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 startup website or by yourself using your knowledge of Bootstrap.
So for all of that and more, I'll see you there.