In the evolving world of web, things are shaping like never before. With deep internet penetration and increase in usage of e-commerce application, the boundaries of web applications are redefined. User Interface and User Experience plays a vital role to target different sections of netizens.
The later posses challanges and to developers and designers to develop responsive, interactive and high performing web applications. Bootstrap is something like addon or plugin which helps the developer and designer to enhance their end user UI and UX to next level.
Day by day bootstrap websites and webapplications are mushrooming in the internet world. This article help you understand what is bootstrap and basic implementation of it.
Usage of web applications and websites is slowing trending towards mobile devices crossing the requests from laptop and desktop users. So now website developers & designers need to target different set of responses and requests coming from mobile, tablets, laptops and desktops. Developers need to redesign there sites as per the screen resolutions of different devices. It is challenge for a mobile user to view the HTML rendered for a deskop targetted website.
Top social network sites like facebook and twitter have there own implementation of device trageted sites with m. domain.com or .mobi domain websites. Though maintaining different websites solved the problem to some extent, it involves lot of cost and effort to develop and maintain. An uphill task for small and medium range e-commerce sites.
Finally web community came up with idea of having one site with different styles which render the html and respective styles and tags based on targetted device. In web language we can call it Responsive web design, which aimed at designing the sites to provide optimal viewing experience.
Bootstrap is one such open source framework which helps us to leverage Responsive Web Design features along with mobile first developement i.e. aim for mobile and scale to tablets and desktop rather than vice versa.
What is bootstrap
Bootstrap is an open source css and script library. It inherits JQuery and amplified with new script functions and conditional styles which can be used to develop responsive UI and Mobile first developement. Apart from CSS and JS files it also provide rich set of icons and fonts. Below is the hierarchy of bootstrap framework.
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
│ ├── bootstrap.js
│ └── bootstrap.min.js
We can get the source code, libraries and default template from http://getbootstrap.com/ website.
The website is featuerd to provide a customized tab to download our own version of selective bootstrap components, variables and scripts. This helps in reducing the size of library files.
Bootstrap Grid System
Before going any furrther, want to explain you about bootstrap grid system. This is the core for this framework, rest all revolve around this. Each row in a grid is divided into twelve columns. It is intended that the sum of the columns should be 12 and if it is more, like 13 or 14 columns the extra columns after 12 are wrapped to next row. You can choose any combination but final sum of columns should be twelve. If we want to have four columns then the size of each column must be three (4x3) and if column size is six then we can have only two columns. (6x2). The same is illustrated with below diagram for better understanding.
Bootstrap Controls and Features
As discussed earlier bootstrap provides rich set of components. Covering only the basic tags and styles for now.
- Buttons & Icons
We can display text in different forms like bold, italic, different sizes and colours by appying in build styles to div and paragraph tags. Below are few typographies along with source code.
Used to differentiate particular paragraph with remaining regular paragraphs. In the below image for the first paragraph lead style is applied to display it with bigger font size and bold to grab the user attention from the rest of the paragraphs.
<p>Visakhapatnam, also known as Vizag is the largest city in the state of Andhra Pradesh and the third largest city on the east coast of India (after Chennai and Kolkata)
Based on the context or event we can display the text in different colours like yellow for warning, green for success and red for error text. Same is illustrated below.
<p class="text-success">This content carries a success class</p>
<p class="text-info">This content carries a info class</p>
<p class="text-warning">This content carries a warning class</p>
Buttons and Icons
Like above changing the color of text with event or context we can also apply the same to buttons. We can apply the same style of normal button to anchor tags as well by using btn class. For better user experience we can display respective icon along with button. This can be acheived by using graphicon icons set. Below are the samples for anchor, html buttons and button with icon.
<a href="#" class="btn btn-success">Submit</a>
<a href="#" class="btn btn-danger">Cancel</a>
<input type="submit" class="btn btn-primary" value="Login" >
<a href="#" class="btn btn-sm btn-danger">
<span class="glyphicon glyphicon-play"></span>
Default text here
Style definations play a vital role in bootstrap. In the below code "nav" is group name and "navbar" identifies the tags belong to the navigation bar. We can have customized, floating and fixed navigation bars just by altering few styles. We can make the respective menu item active by defining active in the order item style. Will try to discuss more about navbar types like collapse, fixed and floating in the next article.
<div id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header navbar-left">
<ui class="nav navbar-nav navbar-right">
<li class="nav active"><a href="#">Participate</a></li>
<li class="nav"><a href="#">Contact Us</a></li>
<li class="nav"> <a href="#">Gallery</a></li>
Data entry is the most common thing any website require. We can group the form elements, display them in vertical, horizontal ways and can define each and every control in more interactive manner enriching the user experience.
Form displayed below is a simple login form with Email and Password. Below form occupes 6 columns out 12. Email input control is using input "group addon" option to display "@" as part of the textbox. To display water mark text in the input controls placeholders are used.
<section id="frm" class="container" >
<input type="email" class="form-control"
id="inputEmail" placeholder="Provide your Email">
<input type="password" class="form-control"
id="inputPassword" placeholder="Provide strong Password">
<label><input type="checkbox"> Remember me</label>
<button type="submit" class="btn btn-primary">Login</button>
Attaching sample file which I used for showing the above code snippets and generating images. You can download and refer if required. It is not having any icons, download from below reference website.
1. www.getbootstrap.com for libraries
2. www.bootswatch.com for free bootstrap templates