Click here to Skip to main content
Click here to Skip to main content

Basics of the Bootstrap script library

, 13 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Basics of Bootstrap

Introduction

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.

Background

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.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

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.
  • Typography 
  • Buttons & Icons
  • Navbars
  • Forms

Typography

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.

Lead

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.

 <div class="Lead">
        <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)
        </p>
    </div>
    <p>It is nestled among the hills of the Eastern Ghats and faces the Bay of Bengal on the east. Visakhapatnam is the administrative headquarters of Visakhapatnam district and headquarters of the Eastern Naval Command of the Indian Navy.
    </p>

Text Classes

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.

<div class="row">
  <p>
      <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
       </a>
  </p>
</div>

Navbars

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>
        </ui>    
  </div>
</div>

 

Forms

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" >
  <form>
    <div class="col-md-6">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <div class="input-group">
            <span class="input-group-addon">@</span>        
            <input type="email" class="form-control" 
                   id="inputEmail" placeholder="Provide your Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control"
               id="inputPassword" placeholder="Provide strong Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
    </div>
</form>
</section>

 

 

Apart from above bootstrap provides good number of controls and plugins which are not discussed here but very much useful. Since javascript and css is minified and all are run at client side usage of bootstrap increases and performance and user experience. 

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.

References

1. www.getbootstrap.com for libraries

2. www.bootswatch.com for free bootstrap templates

 

 

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Madhukar Mudunuru
Technical Lead Broadridge
India India
Myself working for Broadridge Financial Solutions. Spends free time, working with new stuff from Microsoft and Web technologies.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
GeneralMy vote of 3 [modified] PinmvpAkhil Mittal14-Jul-14 0:44 
GeneralRe: My vote of 3 PinmemberMadhukar Mudunuru14-Jul-14 3:02 
GeneralRe: My vote of 3 PinmemberMadhukar Mudunuru14-Jul-14 3:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150123.1 | Last Updated 13 Jul 2014
Article Copyright 2014 by Madhukar Mudunuru
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid