Bootdtrap

Tutorials In This Section

What is Bootstrap?

Developed by Twitter, Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and applications. Essentially Bootstrap consists of a pre-built CSS stylesheet and JavaScript file for adding responsive formatting and events to a Web site. Bootstrap makes extensive use of CSS media queries and jQuery to get its work done.

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 .container-fluid class.

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 row and 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

Bootstrap Components 

A Data-Driven Menu System for Bootstrap