X
31Jul

Twitter Bootstrap – An UI Framework for Web Applications

Twitter Bootstrap is an open source front end framework for HTML, CSS and JS, using which we can create a responsive UI for our web application. This is supported by all major browsers.

The design patterns included in Twitter Bootstrap are listed below:

Scaffolding

  • Grid system
  • Fixed-width layout
  • Fluid-width layout

Typography

  • Headings
  • Body text
  • Lists
  • Inline labels

Misc Components

  • Media thumbnails
  • Tables
  • Forms
  • Buttons

Navigantion

  • Fixed top bar
  • Tab navigation
  • Pill navigation
  • Breadcrumb navigation
  • Pagination

Alerts

  • Basic alert messages
  • Block messages

Dialogs

  • Modals
  • Popovers
  • Tooltips

We can add Bootstrap into our Web application through ‘Manage Nuget Packages’. In Visual studio, source explorer, right click on your web project, click on the option ‘Manage Nuget packages’.

ManageNuget

In the Manage Nuget Packages dialog, search for ‘Bootstrap’

ManageNuget2

Install Bootstrap 2.3.2 version. The following files are added to your project :

bootstrap.css, bootstrap.min.css, bootstrap-responsive.css, bootstrap-responsive.min.css,

bootstrap.js, bootstrap.min.js

This ensures that you are all set to use Bootstrap.

Bootstrap Usage:

Grid System - Bootstrap offers 2 types of Grids. The default grid system is Fixed grid which is 940pixels wide with 12 columns. We can add responsive stylesheet to it, and it’ll become adaptive to 724px and 1170px wide w.r.t the viewport it’s rendered on. And we have fluid grid system, this is not pixel based, instead it’s based on percentage and can be extended to the responsiveness same as fixed grid.

I’ve added bootstrap into my MVC application as I shown above. I’m adding fixed grid layout into Index view. The content will look like :

code1

The css class ‘row’ is used for creating horizontal rows, and css class ‘span’ (value of ‘number’ can be 1 to 12) is used for creating vertical columns. We will end up creating 3 column grid using ‘span4’ class for each column. The ‘container’ class hold entire structure. We can also nest columns/rows. The view html results into following UI output:

page1

 

Fluid-grid layout: The below html content shows the css classes to be used for Fluid grid layout

code2

Notice that, different css classes(container-fluid,row-fluid) used for fluid grid layout. And it will result into,

page2

Nav-bar - Using bootstrap we can creat a static navbar. This is explained here. We will take a view page, add nav bar into it.

We will create a Nav-bar with four menu items, a dropdown box and a search box. The css classes for each of them is from bootstrap.css/bootstrap-responsive.css. The HTML markup for the same is as follows-

code3

 

Notice the css classes used for Navbar. And the Nav-bar looks like-

navbar

Bootstrap also allows us to create responsive variations of the navbar. We will see more about bootstrap usage in my next post.

 

Related

what's new features are coming in Bootstrap4

What is Bootstrap?Bootstrap is a collection of tools for creating responsive websites...

Read More >

Using Bootstrap Validation in Asp.net Applications

Bootstrap is a powerful mobile first front-end framework for faster and easier web development. It u...

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Contact Us
  • *
  • *