Bootstrap uses HTML and CSS elements that are specifically to be used with the HTML5 doctype.
For this reason it is important to specify the HTML 5 doctype on the web page.
It is also important to note that the Bootstrap 3 framework, is a mobile-first frame work. This means it is designed to be responsive to mobile devices. To ensure that your web page is rendered properly across all devices, make sure to include the following meta data in your <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width value instructs the web page to follow the screen-width of the device.
The initial-scale="1" ensures that the web page does not automatically zoom out of the page in the devices content area.
This is best illustrated with an example.
Here is an example of a web page with no view port meta tag, and one with the viewport meta tag.
Notice that in figure 1, the mobile browser zooms the page out, so it is compressed into the mobile devices screen.
In figure 2, the website does not zoom, and follows the correct mobile responsive web page structure that Bootstrap is intended for.
Next, we need to create a container that will hold the content of our web page. The container is important, because it houses all the other elements of the page. It also controls how the elements inside the container will behave when the page is viewed on different devices.
Generally there are two main types of containers. Fixed-width containers and fluid-containers (also known as full-width containers).
Let's take a look at an example. The sample web below uses a fixed-width container. We can see that it does not scale to the full-width of the browser window.
This page on the other hand, uses what's known as a fluid-container. It scales the full width of the browser window.
Let's start with a fixed width container.
Type in:
<div class="container"></div>
Now we can insert some content into our container:
<h2> My First Bootstrap Web Page </h2>
<p> Lorem ipsum dolor sit amet, no pri commodo erroribus deterruisset, ea graece primis suavitate eum, ne eos aeque scribentur. Et usu utinam legendos delicata, eos case melius ut. Tacimates maluisset eum eu, ad eum ullum argumentum. Sed in molestie urbanitas, viderer facilisis vim ut, his in exerci epicurei. Usu nulla scripta lucilius ad, no debitis noluisse reprehendunt sed.</p> And that's it, let's preview it in our web browser. Since it is difficult to see the fixed-width container, let's add a background color to our container <div>.
To do so, create a style sheet and create a container class, with a background color property.
<style>
.container {
background-color: #2ba6cb;
padding: 0 90px;
}
</style> Now if we refresh our page, we can see the blue background color, and also that the container does not occupy the entire content area of the web browser.
Let's change the fixed-width to a fluid container and see the difference.
<div class="container-fluid">
Final Script
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2> My First Bootstrap Web Page </h2>
<p>
Lorem ipsum dolor sit amet, no pri commodo erroribus deterruisset, ea graece primis suavitate eum, ne eos aeque scribentur. Et usu utinam legendos delicata, eos case melius ut. Tacimates maluisset eum eu, ad eum ullum argumentum. Sed in molestie urbanitas, viderer facilisis vim ut, his in exerci epicurei. Usu nulla scripta lucilius ad, no debitis noluisse reprehendunt sed.
</p>
</div>
</body>
</html>