CodeDigest.Com Logo
Featured:
All QuickStart Guides

Learn to use Bootstrap in Asp.Net MVC Application

 

Bootstrap is an open-source HTML and CSS based framework that helps to develop responsive and cross browser webpages easily. It is originally developed for internal use in Twitter and later released as free and open-source for developing web pages.

 

Besides UI styles, it also has number of jQuery based plugins for building many of useful front-end components like Carousel, Alerts, Pop-up components, etc. For Asp.Net developers, Visual Studio IDE includes Bootstrap package by default in all of its web project templates.

Current version as of this writing is v3.3.7 and version 4.0 is about to release. The version 4.0 is complete re-write of Bootstrap with many new features.

Repository: https://github.com/twbs/bootstrap

Project Home: http://getbootstrap.com

CDN Links

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

Benefits

  1. The complexity in styling UI elements is made simpler. It is to be noted that most of the web developers are dependent on UI designers for themes and stylesheets until Bootstrap released.

  2. It helps in building responsive web pages easily. Webpages using Bootstrap will auto adjust to various viewports, like smart phones, tablets and desktop screens.

A Bootstrap template viewed in laptop screen,

Same page on Tablet screen,

On Smart phone,

  1. Works in all latest browsers.

  2. It provides many re-usable UI components.

  3. Availability of various free plugins and templates.

 

Quick Start

Configuring Bootstrap

  1. Download the minified Bootstrap package from here. Unzip the package and copy all the 3 folders into your application root or to the folder where you maintain the styles and scripts. Unzipped package,

If you are using Visual Studio, then creating a new web project will automatically include all necessary bootstrap files for start using bootstrap. If it is not included, you can download using Nuget. On solution explorer, right click project and select “Nuget Package Manager..". Search for Bootstrap and click Install. This will download and install the bootstrap into your project.

Alternatively, you can use CDN instead of maintaining a local bootstrap file copies.

  1. Include the bootstrap stylesheet under head section of the webpage(or your master page layout)

 

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title - My ASP.NET MVC Application</title>

<meta name="viewport" content="width=device-width" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet">

</head>

 

The 2 meta tags, that sets charset and viewport are mandatory.

Note- I have copied bootstrap styles to Content folder under root directory.

  1. Include the script file before the <body> closing tag. jQuery is necessary if you will use any bootstrap plugin.

 

<script src="~/Scripts/jquery-1.9.1.min.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>

</body>

 

Note- - I have copied bootstrap scripts to Scripts folder under root directory.

  1. That’s it. You can now start using bootstrap styles in your project.

 

Applying Bootstrap Styles

Bootstrap provides a responsive fluid design for front end by using a 12 columns Grid Layout system.

Grid Layout

The Grid Layout design splits page into 12 columns (or parts) to form a row and controls can be placed inside each column.

Row with 12 separate columns

 

<div class="row">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

</div>

 

A row can also be defined by combining columns. For example, the below row splits a row into 2, first part taking the width of 8 columns and the other taking width of 4 columns.

 

<div class="row">

  <div class="col-md-8">.col-md-8</div>

  <div class="col-md-4">.col-md-4</div>

</div>

 

Read more about grid here.

Similarly, Bootstrap provides various other styles and components for designing UI with very less effort. Some of them are,

  • Tables

  • Forms and Form controls

  • Images

  • Texts

  • Utility classes

  • Tabs and Navigation bars

  • Panels

  • Embedding multimedia objects and etc.

Official Documentation:

http://getbootstrap.com/css/

http://getbootstrap.com/components/