Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Bootstrap Basics

Well done!

You have completed Bootstrap Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Add Custom CSS to Your Bootstrap Site

5:37 with Guil Hernandez

Learn 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