1
00:00:00,471 --> 00:00:04,245
Since Bootstrap is one of the most popular
front-end frameworks for web development,

2
00:00:04,245 --> 00:00:07,305
there is a good chance that your site
will look similar to other websites

3
00:00:07,305 --> 00:00:08,930
developed with Bootstrap.

4
00:00:08,930 --> 00:00:13,670
So you can make your Bootstrap site stand
out, and have it fit your own style and

5
00:00:13,670 --> 00:00:15,570
needs, by adding custom CSS.

6
00:00:16,920 --> 00:00:19,670
For example,
Bootstrap lets you download its files and

7
00:00:19,670 --> 00:00:24,700
make changes, by modifying the source
Sass and compiling it to CSS.

8
00:00:24,700 --> 00:00:28,730
But as I mentioned at the beginning of
the course, those options are not for

9
00:00:28,730 --> 00:00:32,970
everyone, because they might appeal to
a different skill level or use case.

10
00:00:32,970 --> 00:00:37,200
For instance, to customize the Sass,
you'll need to install and

11
00:00:37,200 --> 00:00:41,010
run node and
NPM to compile the Sass to CSS.

12
00:00:41,010 --> 00:00:44,410
Of course, this also means you
need to know how to use Sass.

13
00:00:44,410 --> 00:00:47,223
Fortunately, Treehouse has
lots of courses on Sass, so

14
00:00:47,223 --> 00:00:49,166
check the teacher's notes for links.

15
00:00:49,166 --> 00:00:53,995
Now, you may want to skip the extra
effort of working with Sass, and

16
00:00:53,995 --> 00:00:58,928
work with the compiled and minified CSS or
link to the CDN, like I am.

17
00:00:58,928 --> 00:01:02,572
In that case, the easiest way to
add custom styles to your site,

18
00:01:02,572 --> 00:01:06,640
is by creating a new style sheet,
and writing custom styles inside it.

19
00:01:07,640 --> 00:01:09,874
Back in my workspace,

20
00:01:09,874 --> 00:01:15,882
I'll create a new folder at
the root of my project named CSS.

21
00:01:15,882 --> 00:01:23,039
Next, I'll create a new file inside
the CSS folder, named custom.css.

22
00:01:23,039 --> 00:01:27,477
Now we just need to link
the new CSS file to our HTML.

23
00:01:27,477 --> 00:01:33,160
And it's important that you link
the new CSS file below Bootstrap CSS.

24
00:01:33,160 --> 00:01:36,953
That way, your custom CSS
can override Bootstrap CSS.

25
00:01:42,212 --> 00:01:48,985
So I'll set the path to css/custom.css.

26
00:01:48,985 --> 00:01:53,928
Now I'm ready to modify or
apply additional styling to my site,

27
00:01:53,928 --> 00:01:55,700
inside custom.css.

28
00:01:55,700 --> 00:01:56,349
For example,

29
00:01:56,349 --> 00:01:59,979
let's make the presented by Treehouse
link in the navbar smaller and lighter.

30
00:01:59,979 --> 00:02:04,460
I feel like it's too big, so
let's balance out the navbar content by

31
00:02:04,460 --> 00:02:08,492
creating a new rule in custom.css,
that targets this text.

32
00:02:08,492 --> 00:02:13,525
In the HTML, I see that
navbar-brand is inside the navbar.

33
00:02:13,525 --> 00:02:18,408
So to make sure that we're overriding
Bootstrap's default css for navbar-brand,

34
00:02:18,408 --> 00:02:22,566
we'll make our selector more specific,
using a descendent selector.

35
00:02:22,566 --> 00:02:27,161
So in custom.css, we'll create a rule

36
00:02:27,161 --> 00:02:32,035
that targets .navbar .navbar-brand.

37
00:02:32,035 --> 00:02:36,288
We'll add a color property and
set the color with rgba,

38
00:02:36,288 --> 00:02:39,741
using the values 255, 255, 255.

39
00:02:39,741 --> 00:02:43,922
And we'll set the alpha to 0.85.

40
00:02:43,922 --> 00:02:49,725
And right below,
I'll set the font size to 1rem.

41
00:02:49,725 --> 00:02:53,362
You can even write your own styles for
Bootstrap's component classes,

42
00:02:53,362 --> 00:02:55,270
like jumbotron for instance.

43
00:02:55,270 --> 00:03:00,702
Remember, the jumbotron component
has the class jumbotron.

44
00:03:00,702 --> 00:03:04,732
So let's target jumbotron in custom.css,
and

45
00:03:04,732 --> 00:03:09,648
we'll customize it by adding
this jumbo-bg.jpg image,

46
00:03:09,648 --> 00:03:14,090
located in the image folder,
as a background image.

47
00:03:15,380 --> 00:03:22,971
So back in the .jumbotron rule,
body background-image property.

48
00:03:22,971 --> 00:03:31,049
And set the url path to
../img/jumbo-bg.jpg.

49
00:03:32,700 --> 00:03:37,326
Then to scale the background image
to the size of the jumbotron,

50
00:03:37,326 --> 00:03:41,965
I'll give the jumbotron a background
size cover declaration.

51
00:03:43,907 --> 00:03:47,541
The value cover adjusts
the background image, so that

52
00:03:47,541 --> 00:03:52,519
we see the full image while maintaining
its width and height proportions.

53
00:03:52,519 --> 00:03:55,310
All right, so the site starting
to look better, isn't it?

54
00:03:55,310 --> 00:03:58,451
The custom CSS certainly
adds a unique touch.

55
00:03:58,451 --> 00:04:03,162
Now, I'll stop here, but you can keep
adding more custom styles if you'd like.

56
00:04:03,162 --> 00:04:07,674
For more resources on how to customize and
extend the Bootstrap framework,

57
00:04:07,674 --> 00:04:12,140
be sure to visit the examples and
theme page of the documentation.

58
00:04:12,140 --> 00:04:16,022
Here, you'll find lots of downloadable
examples and starter templates for

59
00:04:16,022 --> 00:04:19,972
building projects like dashboards,
applications and marketing websites.

60
00:04:19,972 --> 00:04:24,390
You can even download official themes,
design and built by Bootstrap's creators.

61
00:04:25,870 --> 00:04:26,710
So that's it!

62
00:04:26,710 --> 00:04:29,988
We built a professional-looking
site really quickly.

63
00:04:29,988 --> 00:04:32,537
Now the site's ready to
upload to a server and

64
00:04:32,537 --> 00:04:34,825
introduce the world to Full Stack Conf.

65
00:04:34,825 --> 00:04:38,860
And it looks like the conference
organizers are really happy with the job

66
00:04:38,860 --> 00:04:40,192
you did, so nice work.

67
00:04:40,192 --> 00:04:43,904
In this course, you learned that
using a framework like Bootstrap,

68
00:04:43,904 --> 00:04:48,256
helps you build projects quickly without
having to spend lot of time on the HTML,

69
00:04:48,256 --> 00:04:50,185
CSS, JavaScript, or the design.

70
00:04:50,185 --> 00:04:52,872
So the methods I covered,
should give you new ideas for

71
00:04:52,872 --> 00:04:56,510
using Bootstrap as a front-end
web development tool.

72
00:04:56,510 --> 00:04:58,750
To practice what you've
learned in this course, and

73
00:04:58,750 --> 00:05:03,390
to learn about other Bootstrap components,
try adding new features to the site.

74
00:05:03,390 --> 00:05:05,930
For example,
add validation styles to the form,

75
00:05:05,930 --> 00:05:08,710
using Bootstrap's form
validation classes and messages.

76
00:05:10,050 --> 00:05:13,070
Use the media object to
enhance the schedule layout,

77
00:05:13,070 --> 00:05:16,980
by floating a speaker's thumbnail image
to the left of their scheduled talk.

78
00:05:16,980 --> 00:05:19,617
I've even included the thumbnails
in the project files.

79
00:05:19,617 --> 00:05:23,606
Or add a collapsible component
to each schedule item,

80
00:05:23,606 --> 00:05:27,345
that shows and
hides information about each talk.

81
00:05:27,345 --> 00:05:29,145
Remember, we're here to help, so

82
00:05:29,145 --> 00:05:32,265
if you have questions about
anything covered in this course,

83
00:05:32,265 --> 00:05:36,347
feel free to reach out to the Treehouse
staff or other students in the community.

84
00:05:36,347 --> 00:05:37,080
Thanks everyone.