- [Instructor] One of the reasons
that I love Bootstrap is because it provides
a lot of shortcuts on how you do work.
But one of the things that people
don't know about Bootstrap,
is that it's extremely themeable.
So I'll show you how to do that in this video.
Now first, I'm going to look for a couple of different fonts
that I want to use in this project.
So I like to use this one called Fjalla.
It's sort of like a thin font that has
a lot of boldness to it, so what you do is you go here,
and you type in the name of the font,
and then you hit this plus sign,
and it gets selected and placed
in a sort of placeholder here.
And I'm going to type in another font
that I love called Open Sans, and once it finds that one,
I am going to add it and then I will expand this right here.
Here's the two fonts.
And generally you want to customize the installation
so that you only install the weights that you need,
that way the application will load a little bit faster.
And generally speaking for Fjalla
I'm just going to leave the default, it only has one weight.
But for open sans I like to use the 300 weight
which is a slightly lighter weight for that font.
So you can choose what weights you want
if you want to use some bold in your application
you can put that as well.
Notice that it says load time fast which is what you want.
And I'm going to click on embed,
and you can use the standard sort of link right here
and add this to the index of that html page.
Or I can hit this import and just copy the import part
and then I'm going to add that in to my Sass code
in my view component.
So let's go ahead and copy this.
And then we'll switch back over into our application.
And in here I'm going to go to the scss section here,
the style section.
And just paste that font.
So that's one way you can customize at least the fonts.
One of the things that people don't know about Bootstrap
is that it has a lot of built in variables
that allow you to customize how it looks.
So let's go ahead and modify this a little bit.
So I'm going to add a headline here.
And this going to say just music app for right now.
And just I'll make this a lot shorter.
I'll go ahead and type in modern hard rock here,
which is one of our songs.
And then I'm going to use some of the Bootstrap classes.
So I'm going to add a class here of text primary,
that's going to make this look blue.
And then I'm also going to add
some additional spacing at the top,
so mt-3 will give us a little bit of margin
at the top of this headline of three units.
Now to customize the way that the colors look,
I'm never really happy with the colors
that I get from Bootstrap.
Also the colors are named things like
primary, secondary, danger.
And those names aren't supposed to go with specific colors.
They're actually supposed to be meaningful,
so you would use danger whenever
you're doing something dangerous
like say you have a dialog box that is sort of on alert,
that's when you would want to use danger.
But generally people use them as specific colors.
So you can redefine, as long as you're using Sass,
all of those colors, by adding a few variable modifications
before you import Bootstrap.
So right here if I wanted to go ahead
and redefine what my primary color was,
then I could use the dollar sign
and I'll just change it to purple for right now.
And what you'll see is that the color
of the primary font changed,
but it didn't just change that blue
to a purple in the text section,
it actually did it everywhere.
So now whenever you use a button that uses
the primary color it's going to look purple.
And so it's a very customizable set of tools
that a lot of people don't even know exist.
So for example if I wanted to change
the color of the background I can say body-bg
and then type in color for the background,
so let's do something dark.
And notice that now my background has that dark color.
And we would to probably change the color called text-body.
So there's a bunch of different variables
that you can access.
So we'll change the color of the body to be white.
And then we'll use the body-color variable as well
and change that to text-body.
So now the text that would be the body of any section
in your code will automatically be this color right here.
So there are a ton of variables
and if you want to know where they're at,
what you could do is go into node modules
and just find Bootstrap itself.
So if we scroll down you should see Bootstrap
come up in here somewhere.
And there's an SCSS version which is where
we are loading things from right here.
And if you open up this folder you'll be able to see
that there is a file called variables.scss
and it has the name of all the variables.
And so what you'll want to do is redefine them
before you import this Bootstrap document.
So you can see there is a ton of them.
Here's all the default colors.
And you'll also find that
there are colors for each component.
So you can redefine the way, for example, the tables work,
by changing all of these different variables.
So if you want it to have even stripes instead of odd.
Notice that every one of the colors
has this default attribute.
Which means that if a variable exists
before this declaration,
then it's going to use that value
instead of whatever Bootstrap has in here.
So in our app.vue,
since we are loading all these color names
before we load Bootstrap
these are redefining whatever is already in Bootstrap.
And just because I don't want to spend a lot of time
coding a lot of Sass or CSS,
I've created a special file for you where you can get
all of the colors and styles for this application.
And I'm just going to copy all this.
So select all this and copy all the way to the bottom.
And I'm going to replace all this.
I'll leave the import for the font.
So let's go ahead and paste that.
And we'll save this.
And you should be able to see that
it has this sort of blue color,
the background is that gray that I showed you
and the fonts are redefined as well
so that my headlines are now using this Fjalla one,
which looks really good.
You can play around with the styles
by looking up the variables, that SCSS file.
If you want more information on how you can
customize the Sass version of Bootstrap,
make sure you search in our library for Bootstrap Sass.