Starting with Bootstrap
Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, etc.
In the HTML Code from the last exercises named “index.html” create a new header section and we are going to input the bootstrap CSS
<html> <head> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> </html>
Now we going to create in a body a new class called “container-fluid”. It’s a bootstrap term for creating as a container. Within that we will also reference few classes, which will be creating words.
A container sets the width of the layout depending on the width of the screen. It places the content in the middle of the page aligning it horizontally. There is equal space between the Bootstrap 4 container and the left and the right edge of the page.
<body> <div class="container-fluid"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> This is the middle content. </div> <div class="col-md-1"></div> </div> </div> </body>
Bootstrap panels
A panel is a bordered box with some padding around its element. The panel components are used when you want to put your DOM component in a box.
Here is an example of the basic panel:
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
Here you can see the example of a simple panel:
Custom CSS
By creating a style file you can have your definitions of the style field separate from the Bootstrap.
Create a new file called “style.css” and there you can create your own CSS code
.BoxValue { font-size: 200%; font-weight: bold; text-align_ center; }
Go back to your “index.html” and find where ever this class to apply to this text
<div class="col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <span class="BoxValue"> {{data("name")}} </span> </div> </div> </div>
As we created a custom style file, so our html page doesn’t know how to find. That’s why we go to the top of our html page and in the header section of the html we create a link:
<html> <head> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> </html>
Here is the result of our page with CSS: