Preview
Video Player
00:00
00:00
Add Custom CSS to Your Bootstrap Site
5:37Learn how to make your Bootstrap site stand out, and have it fit your own style and needs, by adding custom CSS.
Since Bootstrap is one of the most popular
front-end frameworks for web development,
0:00
there is a good chance that your site
will look similar to other websites
0:04
developed with Bootstrap.
0:07
So you can make your Bootstrap site stand
out, and have it fit your own style and
0:08
needs, by adding custom CSS.
0:13
For example,
Bootstrap lets you download its files and
0:16
make changes, by modifying the source
Sass and compiling it to CSS.
0:19
But as I mentioned at the beginning of
the course, those options are not for
0:24
everyone, because they might appeal to
a different skill level or use case.
0:28
For instance, to customize the Sass,
you'll need to install and
0:32
run node and
NPM to compile the Sass to CSS.
0:37
Of course, this also means you
need to know how to use Sass.
0:41
Fortunately, Treehouse has
lots of courses on Sass, so
0:44
check the teacher's notes for links.
0:47
Now, you may want to skip the extra
effort of working with Sass, and
0:49
work with the compiled and minified CSS or
link to the CDN, like I am.
0:53
In that case, the easiest way to
add custom styles to your site,
0:58
is by creating a new style sheet,
and writing custom styles inside it.
1:02
Back in my workspace,
1:07
I'll create a new folder at
the root of my project named CSS.
1:09
Next, I'll create a new file inside
the CSS folder, named custom.css.
1:15
Now we just need to link
the new CSS file to our HTML.
1:23
And it's important that you link
the new CSS file below Bootstrap CSS.
1:27
That way, your custom CSS
can override Bootstrap CSS.
1:33
So I'll set the path to css/custom.css.
1:42
Now I'm ready to modify or
apply additional styling to my site,
1:48
inside custom.css.
1:53
For example,
1:55
let's make the presented by Treehouse
link in the navbar smaller and lighter.
1:56
I feel like it's too big, so
let's balance out the navbar content by
1:59
creating a new rule in custom.css,
that targets this text.
2:04
In the HTML, I see that
navbar-brand is inside the navbar.
2:08
So to make sure that we're overriding
Bootstrap's default css for navbar-brand,
2:13
we'll make our selector more specific,
using a descendent selector.
2:18
So in custom.css, we'll create a rule
2:22
that targets .navbar .navbar-brand.
2:27
We'll add a color property and
set the color with rgba,
2:32
using the values 255, 255, 255.
2:36
And we'll set the alpha to 0.85.
2:39
And right below,
I'll set the font size to 1rem.
2:43
You can even write your own styles for
Bootstrap's component classes,
2:49
like jumbotron for instance.
2:53
Remember, the jumbotron component
has the class jumbotron.
2:55
So let's target jumbotron in custom.css,
and
3:00
we'll customize it by adding
this jumbo-bg.jpg image,
3:04
located in the image folder,
as a background image.
3:09
So back in the .jumbotron rule,
body background-image property.
3:15
And set the url path to
../img/jumbo-bg.jpg.
3:22
Then to scale the background image
to the size of the jumbotron,
3:32
I'll give the jumbotron a background
size cover declaration.
3:37
The value cover adjusts
the background image, so that
3:43
we see the full image while maintaining
its width and height proportions.
3:47
All right, so the site starting
to look better, isn't it?
3:52
The custom CSS certainly
adds a unique touch.
3:55
Now, I'll stop here, but you can keep
adding more custom styles if you'd like.
3:58
For more resources on how to customize and
extend the Bootstrap framework,
4:03
be sure to visit the examples and
theme page of the documentation.
4:07
Here, you'll find lots of downloadable
examples and starter templates for
4:12
building projects like dashboards,
applications and marketing websites.
4:16
You can even download official themes,
design and built by Bootstrap's creators.
4:19
So that's it!
4:25
We built a professional-looking
site really quickly.
4:26
Now the site's ready to
upload to a server and
4:29
introduce the world to Full Stack Conf.
4:32
And it looks like the conference
organizers are really happy with the job
4:34
you did, so nice work.
4:38
In this course, you learned that
using a framework like Bootstrap,
4:40
helps you build projects quickly without
having to spend lot of time on the HTML,
4:43
CSS, JavaScript, or the design.
4:48
So the methods I covered,
should give you new ideas for
4:50
using Bootstrap as a front-end
web development tool.
4:52
To practice what you've
learned in this course, and
4:56
to learn about other Bootstrap components,
try adding new features to the site.
4:58
For example,
add validation styles to the form,
5:03
using Bootstrap's form
validation classes and messages.
5:05
Use the media object to
enhance the schedule layout,
5:10
by floating a speaker's thumbnail image
to the left of their scheduled talk.
5:13
I've even included the thumbnails
in the project files.
5:16
Or add a collapsible component
to each schedule item,
5:19
that shows and
hides information about each talk.
5:23
Remember, we're here to help, so
5:27
if you have questions about
anything covered in this course,
5:29
feel free to reach out to the Treehouse
staff or other students in the community.
5:32
Thanks everyone.
5:36