Tutorials In This Section
What is Bootstrap?
In order for the responsive design features of Bootstrap to work correctly a few items must be in place:
- The document must use the HTML5 doctype, i.e. <!DOCTYPE html>
- The following meta tag needs to be added to the <head> of the HTML document,
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- The Bootstrap Website documentation also suggests developers consider using Normalize.css and Reboot for improved cross-browser rendering.
Note: In the list above, only the first two items are required, the items in the third bullet point are optional. The viewport meta tag initial-scale property controls the zoom level when the page is first loaded. The maximum-scale and user-scalable properties control how the users are allowed to zoom the page in or out.
Creating a Grid With Bootstrap
To implement Bootstrap into your HTML structure you'll need to incorporate the Bootstrap CSS classes into your HTML elements. The example below shows how to a container class as an outer-wrapper for a row class which contains three col classes.
The example above uses the
.container class in the outer
<div> which makes it a fixed-width container, meaning its
max-width property changes at each breakpoint. To make it a fluid-width container where its
max-width property is 100% wide all the time, use the
Note: In Visual Studio 2015 and 2017, the default Web Forms and MVC templates place the
container class in a
<div> located in the masterpage for the site and implements the
col classes in the content pages based on the site master.
Bootstrap CSS CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Bootstrap Links of Interest
A Data-Driven Menu System for Bootstrap