How To Use Bootstrap
What is Bootstrap?
Bootstrap is a free front-end framework that includes typography, form, tables, navigation, image design and many other. This framework is easily to use and very useful to make responsive webdesign. Responsive webdesign is a web which automatically adjust their size and performance on all device, so it can be looks good in mobile size until desktop size.
Where to get bootstrap?
You can get bootstrap from:
- open source (bootstrap CDN)
What you need is just to include this jquery below to host a bootstrap from a CDN (Content Delivery Network)
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- download bootstrap
You can download bootstrap and host it by yourself. Go to getbootstrap.com to get the latest version of bootstrap.
Create a Webpage Using Bootstrap
There are three things that you need to know in making a webpage using bootstrap:
1. Add HTML5 doctype
Bootstrap is using HTML5 for all webpage. So, you need to add HTML5 doctype:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Add meta tag for mobile responsive
Bootstrap is support for mobile responsive that called bootstrap3. Add this meta tag in head element to ensure touch zooming and proper rendering:
<meta name="viewport" content="width=device-width, initial-scale=1">
3. Choose containers
There are two type of basic containers in bootstrap:
- .container: this class provides a responsive fixed container
- .container-fluid: this class provides a full width container
Example of Bootstrap Page
This is a very simple example of webpage that using bootstrap, we hope this can help you get any idea about how to use bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Page Example</h1>
<p>Here is some text that you can put.</p>
</div>
</body>
</html>
