Software Development

Take your responsive design work to the next level with Bootstrap

Bootstrap 2 and later is a fully responsive mobile-first framework that includes HTML5 and CSS3 enhancements. Here's a basics how-to guide on developing with Bootstrap.

bootstrapfiga052814.gif
 Figure A: Bootstrap

Bootstrap is a popular open source front-end framework for web and mobile development. Originally created in mid-2010 by Twitter, it was released to the public on August 19, 2011. The code is licensed under MIT, and the documentation is under Creative Commons License CC BY 3.0.

While the framework is advertised as being designed for developer/designer nerds and novices, if you want to take a deep dive into the code, it will require knowledge of HTML, CSS, and JavaScript. It is built for cross-browser and multiple device support, including a built-in responsive design using HTML5 and CSS3 progressive enhancements to help scale resolutions and provide a consistent experience across multiple platforms and screens.

Download

You can obtain the compiled and minified CSS, JavaScript, and fonts, as well as the source code and SASS files from the Getting Started download page. The download includes two major forms. The Precompiled Bootstrap is the most basic form, and once downloaded you unzip the compressed folder (bootstrap-3.1.1-dist.zip, 202KB), and you will see something like the directory and file structure that is displayed below.


bootstrap-3.1.1-dist/
├── css/ 
│ ├── bootstrap.css 
│ ├── bootstrap.min.css 
│ ├── bootstrap-theme.css 
│ └── bootstrap-theme.min.css 
├── js/ 
│ ├── bootstrap.js 
│ └── bootstrap.min.js 
└── fonts/ 
├── glyphicons-halflings-regular.eot 
├── glyphicons-halflings-regular.svg 
├── glyphicons-halflings-regular.ttf 
└── glyphicons-halflings-regular.woff

(Source: Bootstrap)

The other major download form is the Bootstrap source code, which includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. Below is the directory and file structure.


bootstrap/ 
├── less/ 
├── js/ 
├── fonts/ 
├── dist/ 
│ ├── css/ 
│ ├── js/ 
│ └── fonts/ 
└── docs/ 
  └── examples/

(Source: Bootstrap)

The open-source code is maintained on the GitHub community at twbs/bootstrap.

The basic template

The Bootstrap HTML basic template begins with a minimal "Hello World" starting point, as displayed below.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <title>Bootstrap 101 Template</title> 

      <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> 
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
      <!--[if lt IE 9]> 
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
      <![endif]--> 
    </head> 
    <body>
      <h1>Hello, world!</h1> 

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
      <!-- Include all compiled plugins (below), or include individual files as needed --> 
      <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

You can also select from other examples that range from a starter template, a Bootstrap theme, a grids layout, a Jumbotron, a narrow Jumbotron, navigation bars, custom components such as a carousel, blog page, dashboard, sign-in page, and more. The Jumbotron example is displayed in Figure B as shown in Chrome version 34.0.1847.131 m.

Figure B


bootstrapfigb052814.gif

Responsive design

Since Bootstrap version 2, it has become a fully responsive mobile-first framework. The individual components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what the device, environment, or screen size.

If you're using Bootstrap version 2.3.2, you'll need to manually turn on the responsive portion of the framework from within your implementation. To do so, you need to include the following meta and link references within your <head> section.


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Bootstrap also uses media queries to customize the CSS based on various conditions, including ratios, widths, and display type; however, the main focus is on min-width and max-width settings, which allow your websites to respond in the following ways:

  • The setting modifies the width of column in the grid template;
  • The setting will stack elements instead of float wherever necessary; and
  • The setting will resize headings and text to be more appropriate for devices.

The supported devices are determined using four @media queries designated with the min- and max-width settings as displayed below for large desktop, portrait tablet to landscape and desktop, landscape phone to portrait tablet, and landscape phones and lower.


/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Bootstrap also provides several responsive utility classes that are available for faster mobile-friendly development and can be used to either show or hide content based on the device (Table A).

Table A

bootstraptable1053014.jpg

Bootstrap versions higher than 2.3.2 automatically have responsiveness enabled; if you wish to disable responsiveness in the later versions, you need to follow the four simple steps outlined in the Disabling Responsiveness section of the getting started documentation. If you want to view a non-responsive Bootstrap implementation, a demonstration page is provided, with a fixed-width container using the first grid system tier. You can also add the user-scalable=no setting to the viewport meta tag to disable zooming capabilities on mobile devices.

Responsive and fluid containers are set using the container-fluid class within the Bootstrap grid system as shown in the code snippet below.


<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

For more information on the grid system settings, check out the Bootstrap mobile overview, which includes grid options, stacked, horizontal, fluid containers, mobile, desktop, tablet, responsive column resets, offsetting columns, nested columns, and column ordering.

Bootstrap also sets display, typography, and linking with established global settings found in the .scaffolding.less CSS, which specifically:

  • Sets the background-color: #fff; on the body;
  • Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base; and
  • Sets the global link color via @link-color and applies link underlines only on :hover.

Documentation, community, and support

Startup documentation can be found at the Bootstrap website. For previous releases, you can go to Bootstrap v2.3.2 docs, and Bootstrap v2.0.2 docs. Get updates from @twbootstrap on Twitter, read articles and posts on The Official Bootstrap Blog, and for support I suggest viewing Stack Overflow entries tagged as twitter-bootstrap-3.

Browser support

The matrix of supported browsers and operating systems as provided by Bootstrap is displayed in Table B.

Table B

bootstraptable2053014.jpg

For more information on Internet Explorer 8, 9, 10, and other feature support, review the Getting Started Support section of the Bootstrap site.

Pros and cons

Over 32,000 websites have been built with Bootstrap as of May 2014. I could list the good and the bad reasons to use or not use Bootstrap, but plenty has already been written about that topic. If you want to know the pros and cons of using Bootstrap, these resources will give you a good starting point.

Also see

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
Sushma.mobileapp
Sushma.mobileapp

Cross Platform - Main advantage of HTML5 is that it runs on any modern device. Careful thought process is needed to understand as to how the game will respond to various screen sizes and input types. Personalization may be needed in the code to certain extent as per the platform.

Unique Distribution - HTML5 hyperlinks are very powerful. It can be easily distributed across the web and mobile devices. That's why it provides a seamless platform for game development.

http://www.mobileapptelligence.com/html5-game-development.html

Editor's Picks