Using Bootstrap to power your apps

DevToolsGuy / Wednesday, February 3, 2016

What is Bootstrap?

Bootstrap is a free, open source framework built with HTML, CSS and JS to develop responsive web design. It offers an extremely powerful framework developed to facilitate faster and easier web development.

A little bit of history

Bootstrap was developed by Mark Otto and Jacob Thornton of Twitter and as the pair wanted to avoid the inconsistencies involved in the creation of internal tools. Previously there was no set of code structure used by the various teams within Twitter, and this lead the company to develop the framework originally known as ‘Twitter Blueprint’. This standard could be used seamlessly across the company by all developers when they built new tools.

In 2011, Twitter Blueprint was released as ‘Bootstrap’ an open source project on GitHub. Since then it has been maintained by Mark Otto and Jacob Thornton as well as a large community of open source developers.

In 2012, Bootstrap 2 was released with the 12 columns grid layout and lot of reusable components.

In 2013, Bootstrap 3 was released with a flat design and supported mobile first design.

Bootstrap provides more than dozen reusable components for web development, these are completely reusable and easily customizable. Whether you wish to work on the User Interface of a component or its functionality, both can be achieved by customizing their underlying CSS and JavaScript respectively. Bootstrap provides some of the basic components which are used in any normal web application like Dropdowns, Button Groups, Bread Crumb, Labels, page headers, List groups, etc. as well as more advanced components such as Accordion, Panels, Progress Bars, Glyphicons, etc. You can view the available components under bootstrap over here.

In the Post we will explain how to use Bootstrap in an ASP.net MVC app.

Getting Started

Install Using Nuget

Bootstrap is available by default with Visual studio 2013 and ASP.Net MVC 5. There is a Nuget package available for bootstrap (I have version 3.0.0 installed)

Install Manually

You can also manually download the Bootstrap from here. Extract the files and you should see the following folder structure of the extracted zip.

Bootstrap-3.3.5-dist

1. css

2. fonts

3. js

Install Using Bower

$ bower install bootstrap

Install Using npm

$ npm install bootstrap

About the grid

Using the Bootstrap Grid system, we can easily create the page layout structure. With Bootstrap 3 it is possible to create a dynamic and responsive page layout and it scales around 12 columns based on different devices such as desktop, tablets or cellphones.

Bootstrap provides different classes for each type of devices. Below is the prefix of the classes used for different type of devices:

Device Type	Class prefix	Resolution
Extra small devices (Cell Phones)	.col-xs-	<768px
Small Devices (Tablets)	.col-sm-	>768px
Medium Devices (Laptops)	.col-md-	>992px
Large Devices (Desktops)	.col-lg-	>1200px

Now let’s say we want to create a page layout with 2 columns. Our div structure would look something like this,

<div >Row 1 Column 1</div>

<div > Row 1 Column 2</div>

</div>

<div> Row 2 Column 1</div>

<div> Row 2 Column 2</div>

</div>

So, if we use the class prefix as .col-xs- for each column div, Bootstrap will apply the style not only for extra small devices but also for small, medium and large devices too - which is pretty neat.

Now if we want to show columns side by side in Bootstrap, we have to mark the div styles as per devices to be supported. For demo purposes, we will have this supported for all device types and so we will use the class prefix as .col-xs-*. Also, since Bootstrap supports 12 columns in layout, * in the class has to be replaced with a number less than 12 and all the columns prefix (*) total in the particular row should be 12.

<div class="col-sm-6">Row 1 Column 1</div>

<div class="col-sm-6"> Row 1 Column 2</div>

</div>

<div class="col-sm-3"> Row 2 Column 1</div>

<div class="col-sm-9"> Row 2 Column 2</div>

</div>

So, in this case, the first row will have two columns of width in ratio 1:1 and the second row will have columns in the ratio of 3:9. In this way we can create the page layout with 12 columns supported using Bootstrap.

Useful tools

The following tools are very useful for developers to build User Interface for applications using Bootstrap. You can leave the wire framing tool behind and instead use one of these:

1. JetStrap – this is a premier interface building tool for Bootstrap. It is 100% web based with a variety of code snippets available and you can use complex components quickly. You can drag and drop the elements and create a responsive design and can create one free project with unlimited screens.

2. Brix – This is also 100% web based and provides various ready-to-use templates in addition to the reusable components. You can select one of the templates and start customizing as per your needs. The live testing feature is very useful on this site.

3. Bootsnipp – Bootsnipp provides you with a web based tool for creating bootstrap screens. In addition to the templates it also provides various forms which are commonly used in applications like Login, Registration, Contact, etc. It also has a very responsive editable grid and email templates.

Bootstrap made web development easy!

With Bootstrap, web development with responsive design is so much easier. With Microsoft providing support for Bootstrap directly within Visual Studio, its use and popularity has grown over the last year and has been very helpful to a lot of people:

1. One framework for all devices – With Bootstrap responsive design you can provide your webpage with support for different devices

2. Browser support – Bootstrap works with all modern browsers like Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera. You can find more information on browser support over here.

3. Quick to start – With the framework already in place, developers can jump straight into development with the available bootstrap templates

4. JavaScript, HTML5 & CSS3 – Bootstrap is built on HTML5, CSS3 and JavaScript, hence one does not need knowledge of complex technologies to work with Bootstrap

5. Open Source – It is free to use and is supported and backed by a large community of developers.

Create high-performance, touch-first, responsive apps with AngularJS directives, Bootstrap support and Microsoft MVC server-side widgets. Download Ignite UI today for your high-demand data needs.