In the previous video, we already learned about context. 2
Now, in this video we are going to learn about bootstrap. 3
If you don’t know what bootstrap is 4
let’s open the bootstrap site. 5
Here we can see that Bootstrap is an opensource 6
toolkit for developing with HTML, CSS, and Javascript. 7
We will use bootstrap to beautify our templates file. Let’s click get started to see how to use bootstrap. 8
First, we need to copy this code and paste it in the head section. 9
We will put it in the hello_world.html 10
We also need to copy this code, and put it before the closing body tag 11
Now let’s open the browser and refresh the page. 12
Look, the display is changed. 13
This is show us that the bootstrap is running. 14
We will try to add navbar in our website. Lets open the bootstrap documentation again, 15
Go to component section and then navbar, 16
here we can see some example of navbar. 17
We will use this, copy the code and paste it to the our templates file. 18
Go back to the browser and refresh the page. 19
Here we can see that we get nice navbar. 20
Now we have a beautifull page without write a complex css & javascript. That’s the power of bootstrap. 21
Now let’s try to change the color of the 22
navbar, I want a dark color, let’s back to bootstrap documentation and search how 23
we can create a dark navbar. Here we can see some example, you are free to choose yours, 24
but now I choose dark color. To get dark color, we need to change the navbar class to navbar-dark 25
and bg-dark. Let’s back to the visual studio code and change the class. 26
Open the browser again and refresh the page. 27
Cool ! now we have dark navbar as we want. 28
This is the end of this video, if you want to explore more about bootstrap, you can read 29
the documentation and search what you want. Bootstrap have a very good documentation with 30
a sample code on it, so we can copy paste the code and just need to modify a little things. 31
Thankyou for watching and See you on the next video.