In this article, I’ll explain the basic html bootstrap structure required for a web page for using Twitter Bootstrap. I’ll also explain the technique to make the layout fixed or fluid. This article is based on Twitter Bootstrap version 3.
HTML Structure for Bootstrap:
For using Bootstrap, the html web page should follow a structure starting from the document type declaration, adding style sheets and meta tags in header, navigation and container in the body and java script declarations. Let’s start with the doctype
HTML Doctype:
Twitter Bootstrap needs HTML 5 doctype for rendering all its controls and components uniformly across all browsers. So, on creating an html file, add the HTML5 doc type tag as the first html line.
<!DOCTYPE html>
HTML Header:
In the html header part, the minimum requirement for the bootstrap to work responsively with latest browsers and mobile devices is to declare a viewport meta tag and include the bootstrap style sheet.
Meta Tag:
Viewport meta tag is important for the bootstrap and the mobile devices to respond according to the width of the display and the zoom level. Setting the width in viewport helps the browsers to respond appropriately for the display size. The initial-scale property determines the zoom level of the web page on load. For a mobile friendly responsive layout, set the width to device-width and initial-scale to 1.0. If you don’t want the web page to have zoom option in mobile devices add the properties maximum-scale=1.0 and user-scalable=no after initial-scale=1.0.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
CSS:
In bootstrap versions earlier than 3, there was a separate style sheet bootstrap-responsive.css for responsive user interface. In versions 3.0.0 and later, the fluid or responsive nature is inbuilt in the base style sheet bootstrap.css. This single style sheet handles the responsiveness of the web page. Link the developer version of the style sheet bootstrap.css or the minified version bootstrap.min.css below the viewport meta tag. It’s recommended to use minified style sheet on production environment. During development, bootstrap.css will be helpful for debugging.
<link href=”css/bootstrap.min.css” rel=”stylesheet” />
JavaScript for IE prior to version 9:
Internet Explorer versions earlier than 9 don’t support HTML5 or CSS3 media queries. But bootstrap needs HLML5. So as a workaround you have to import html5shiv.js to make the earlier versions of IE to support HTML5 and respond.js to make it to work with CSS3 media queries.
You can either download these java script files from https://github.com/afarkas/html5shiv and https://github.com/scottjehl/Respond. These js files should be added in the header section of the HTML below the bootstrap css.
Including cdn files:
<!–[if lt IE 9]>
<script type=”text/javascript” src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js” type=”text/javascript”>
Including as local files:
<!– [if lt IE 9]> <script src=”js/html5shiv.js”></script> <script src=”js/respond.min.js”></script> < ![endif]–>
HTML Body:
In the body of the HTML just before closing the body tag, you have to include the jQuery file and the bootstrap java script file. The jQuery file has to be rendered before the bootstrap java script file.
<body>
<h1>Hello, MyTecBits.com!</h1>
…
…
<script src=”js/jquery-1.10.2.min.js”></script> <script src=”js/bootstrap.min.js”></script>
</body>
Layouts:
Fluid Layout:
From bootstrap version 3.0.0, you don’t need to do any extra step or add extra style sheet to get responsive fluid layout. By default, bootstrap implements the responsive layout. If you have created the basic template specified above in this article, the responsiveness is already built-in. Below is the basic template for a bootstrap web page with fluid layout.
<!DOCTYPE html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>www.MyTecBits.com – Bootstrap</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet” />
<!– [if lt IE 9]> <script src=”js/html5shiv.js”></script> <script src=”js/respond.min.js”></script> < ![endif]–>
</head>
<body>
<h1>Hello, MyTecBits.com!</h1>
…
…
<script src=”js/jquery-1.10.2.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
Fixed Layout:
Generally it’s not recommended to create a website with fixed layout. Nowadays, significant amount of internet website traffic is coming from small devices like tablet and smart phones. So it’s good to have fluid layout for public websites. But on some cases like intranet applications, you may need to have fixed layout. In that case, follow the below steps to disable the responsiveness of the bootstrap. As bootstrap from version 3 is designed to be fluid in nature, disabling the fluidity needs several steps.
- Remove the viewport meta tag explained earlier.
- Override the width property in the container class in style sheet to a fixed size. You can add a style sheet below the bootstrap style sheet and add the below class.
<style type=”text/css”><!–
.container{ max-width: none !important; width: 970px; }
–></style> - Remove the collapsing and expanding behavior in the NavBar, if you are using it. I’ll explain this in detail while writing about NavBar.
- In the grid layouts use .col-xs-* class instead of .col-md-* and .col-lg-*. I’ll explain this in detail in my future article about bootstrap grid system.
Below is the sample skeleton for Fixed layout:
<!DOCTYPE html>
<head>
<title>www.MyTecBits.com – Bootstrap</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet” />
<!– [if lt IE 9]>
<script src=”js/html5shiv.js”></script>
<script src=”js/respond.min.js”></script>
< ![endif]–>
<style type=”text/css”><!–
.container{
max-width: none !important;
width: 970px;
}
–></style>
</head>
<body>
<h1>Hello, MyTecBits.com!</h1>
<script src=”js/jquery-1.10.2.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
Tools & Technologies Used:
- Bootstrap: 3.0.2
- HTML5
- jQuery: 1.10.2
- html5shiv.js: 3.7.0
- respond.min.js: 1.3.0
Reference: getbootstrap.com