1

00:00:01,200  -->  00:00:05,100
In the previous video, we already learned
about context.

2

00:00:05,340  -->  00:00:09,380
Now, in this video we are going to learn about bootstrap.

3

00:00:10,100  -->  00:00:12,680
If you don’t know what bootstrap is

4

00:00:13,360  -->  00:00:15,480
let’s open the bootstrap site.

5

00:00:24,580  -->  00:00:28,180
Here
we can see that Bootstrap is an opensource

6

00:00:28,180  -->  00:00:32,940
toolkit for developing with HTML, CSS, and
Javascript.

7

00:00:33,540  -->  00:00:41,640
We will use bootstrap to beautify our templates file.
Let’s click get started to see how to use bootstrap.

8

00:00:45,740  -->  00:00:51,580
First, we need to copy this code
and paste it in the head section.

9

00:00:51,920  -->  00:00:55,780
We will put it in the hello_world.html

10

00:01:11,100  -->  00:01:16,100
We also need to copy this code, and put it before the closing body tag

11

00:01:27,340  -->  00:01:31,020
Now let’s open the browser and refresh the
page.

12

00:01:32,900  -->  00:01:35,320
Look, the display is changed.

13

00:01:36,260  -->  00:01:39,580
This is show us that the bootstrap is running.

14

00:01:41,020  -->  00:01:47,160
We will try to add navbar in our website.
Lets open the bootstrap documentation again,

15

00:01:47,540  -->  00:01:51,420
Go to component section and then navbar,

16

00:01:57,860  -->  00:02:01,320
here
we can see some example of navbar.

17

00:02:11,600  -->  00:02:17,420
We will use this, copy the code and paste it to the
our templates file.

18

00:02:31,720  -->  00:02:34,840
Go back to the browser and refresh the page.

19

00:02:40,780  -->  00:02:44,320
Here we can see that we get nice navbar.

20

00:02:45,320  -->  00:02:52,940
Now we have a beautifull page without write
a complex css & javascript. That’s the power of bootstrap.

21

00:02:53,580  -->  00:02:56,720
Now let’s try to change the color of the

22

00:02:56,720  -->  00:03:05,000
navbar, I want a dark color, let’s back
to bootstrap documentation and search how

23

00:03:05,000  -->  00:03:13,200
we can create a dark navbar. Here we can see
some example, you are free to choose yours,

24

00:03:13,720  -->  00:03:14,220
but now I choose dark color. To get dark color,
we need to change the navbar class to navbar-dark

25

00:03:14,220  -->  00:03:27,880
and bg-dark. Let’s back to the visual studio
code and change the class.

26

00:03:37,840  -->  00:03:41,100
Open the browser again and refresh the page.

27

00:03:43,740  -->  00:03:48,020
Cool ! now we have dark navbar as we want.

28

00:03:48,300  -->  00:03:54,120
This is the end of this video, if you want
to explore more about bootstrap, you can read

29

00:03:54,120  -->  00:04:00,060
the documentation and search what you want.
Bootstrap have a very good documentation with

30

00:04:00,060  -->  00:04:07,640
a sample code on it, so we can copy paste
the code and just need to modify a little things.

31

00:04:08,100  -->  00:04:11,920
Thankyou for watching and See you on the next
video.