Bootstrap Introduction Bootstrap Benefits Setting Up Bootstrap Bootstrap Grid System Bootstrap Table and Button Classes Bootstrap Form Classes

Web Engineering (CS-666/CS-723)
Mr. Aftab Khan email id: aftab@biit.edu.pk Whatsapp# 0344-8184704

Mr. Amir Rashid email id: amir@biit.edu.pk, Whatsapp# 0302-5698539
(Week 3) Lecture 5-6

Objectives: Learning objectives of this lecture are
 Bootstrap Introduction
 Bootstrap Benefits
 Setting up Bootstrap
 Bootstrap Grid System
 Bootstrap table and button Classes
 Bootstrap Form classes
Text Book & Resources: Professional ASP.NET MVC 5 by Jon Galloway, Brad Wilson, K. Scott Allen,
David Matson
Bootstrap Introduction
Bootstrap is a free, open-source and is the most popular HTML, CSS, and JavaScript
framework developed by twitter for creating responsive web applications.
It includes HTML and CSS based design templates for common user interface components
like Buttons, Dropdowns, Typography, Tabs, Forms, Tables, Navigations, Alerts and Modals
etc. along with optional JavaScript extensions.
Bootstrap framework is based on open standards - HTML, CSS and JavaScript. This means
bootstrap can be used with any server side technology and any platform. You can use it
with any web application built with any server side technology like ASP.NET, JAVA and
PHP etc.
Advantages of using bootstrap
Supports responsive design: One of the greatest advantages of using bootstrap is that it
helps us create responsive web applications faster and easier. So the obvious question that
comes to our mind is, what is a responsive web application? A responsive web application
automatically adapts to different screen sizes (i.e. desktop computers, laptops, tablets.
mobile devices etc.). A responsive application provides optimal viewing and interaction
experience i.e. easy reading and navigation with a minimum of resizing, panning, and
scrolling across a wide range of devices. So you don't have to worry about your application
not being compatible with multiple devices.
The images at the following links shows how a responsive and non-responsive application
looks like on a mobile device.
http://www.webnersolutions.com/wp-content/uploads/2015/08/responsive-vs-non-responsive-
web-design1.jpg
in the following link is a live responsive application example. Notice as we resize the
browser, the content automatically adapts to the screen size.
http://bootstrapdocs.com/v3.0.3/docs/examples/jumbotron/
Saves lot of development time: One of the biggest advantages of using Bootstrap is that it
saves lot of development time. Instead of writing code from the scratch, bootstrap offers
readymade blocks of code that you can use and customize to suit your application
requirements. There are also many websites out there that offer free and paid Bootstrap
themes that saves even more development time.
Consistency: Bootstrap was developed by Twitter to encourage consistency across their

internal tools by giving their developers a centralized development code. Since all the
developers are working using a centralized code, the end result is consistent regardless of
who’s working on the project and which web browser is being used.
Setting up Bootstrap
Use following link to download bootstrap version 3.4:
https://getbootstrap.com/docs/3.4/getting-started/#download
Click on download Bootstrap. With the download you get a single zip folder which contains
all the required bootstrap components. Now you have to unzip the Zip folder.
There are two subfolders in bootstrap-4.3.1-dist named css and js. We will only discuss and use
css files for design purpose.
Following are the file in css folder.
I’ll discuss only two files here.
bootstrap.css - This is the core css for Bootstrap that defines all the style for various
controls and components
bootstrap.min.css - This is the compressed version meaning all the whitespaces, line
breaks and any other extra characters have been removed. As a result the size of the
minified file is smaller than the non-minified file. Minified version is usually used on a
production server for efficient download whereas the non-minified version is used in
development environment as it is more readable and easy to debug if there are issues.
Now Create a new project if you have not created any MVC based web Project. I have
already discussed how to create project in previous lectures.
Create a new Controller named BasicSyntaxController (if not created yet) in the project as
following.
Right Click on Index and Select Add view (if not added yet, as you know we have performed all
these steps in previous lecture too). After Adding View you have to only add code provided in
examples of this chapter and run project to view the output.
We have to include bootstrap.min.css to use built in css class in Bootstrap. Right Click
Contents folder and include bootstrap.min.css in this folder if not added. After adding this
file drag and drop bootstrap.min.css in head section of index view.
After including css file of bootstrap you can use any build in css class provided by
bootstrap.
The code of index is as following.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
</div>
</body>
</html>
Bootstrap Grid System
One of the very important concept that we need to understand in Bootstrap is it's Grid
System. The Grid system is used for creating page layouts through a series of rows and
columns. The Grid System consists of 12 columns. This grid system is so flexible that you
can create any page layout that you want.
Let us understand this with the help of example. We have added twelve columns and thery
all are displayed in one row
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container" style="background-color:gray">
<div class="row">
<div class="col-sm-1">
1
</div>
2
</div>
3
</div>
4
</div>
5
</div>
6
</div>
7
</div>
8
</div>
9
</div>
10
</div>
11
</div>
12
</div>
</div>
</div>
</body>
</html>
Here is the output of above code.
But if we added another column in row it will automatically shifted on next row.
Copy and paste following code in the index view.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container" style="background-color:gray">
<div class="row">
1
</div>
2
</div>
3
</div>
4
</div>
5
</div>
6
</div>
7
</div>
8
</div>
9
</div>
10
</div>
11
</div>
12
</div>
13
</div>
</div>
</div>
</body>
</html>
Let us now see how to create a 3 column layout using the Bootstrap Grid System.
Copy and paste following code. I have used inline style to decorate div tag. You are free to
use internal or external style for this purpose
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
<div style="margin:3px;height:200px;background-
color:gray;text-align:center;font-size:large">LEFT Menu</div>
</div>
color:gray;text-align:center;font-size:large">MAIN CONTENT AREA</div>
</div>
color:gray;text-align:center;font-size:large">RIGHT Menu</div>
</div>
</div>
</div>
</body>
</html>

The page should be divided into 3 columns with 1:4:1 ratio. One important thing to keep in
mind here is that, if we add the 3 numbers in the ratio (1:4:1), the sum should be equal to 12,
because the bootstrap grid system consists of 12 columns. This means if the LEFT SIDE BAR
column is 2 units, the MAIN CONTENT AREA column should be 8 units and the RIGHT SIDE
BAR column should be 2 units. So when we add these 3 numbers (2 Units + 8 Units + 2 Units),
we get 12 units.
Bootstrap includes several grid classes for creating layouts for different devices like mobile
phones, tablets, laptops, desktops, etc. The table below shows the available bootstrap grid classes
that you can use to create grid column layouts ranging from extra small devices like mobile
phones to large devices like large desktop screens.
Device Bootstrap (css) class
Extra small device (Mobile Phones) .col-xs-*
Small device (Tablets) .col-sm-*
Medium device (Laptops) .col-md-*
Large device (Desktops) .col-lg-*
Grid classes for a given screen size apply to that screen size and larger unless another declaration
overrides it. Let us understand what we mean by this statement with an example.
For example, we want four equal columns on both medium and large devices.
For medium devices the class that we use is col-md-*. Since we want 4 equal columns, we would
use four col-md-4 columns as shown below. So with the following HTML we get four equal
columns on both medium and large devices. This is because col-md-* class is applied to both
medium and large devices as we have not used col-lg-*.
Here is the code for above Example.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
color:gray;text-align:center;font-size:large">First Column</div>
</div>
color:gray;text-align:center;font-size:large">Second Column</div>
</div>
color:gray;text-align:center;font-size:large">Third Column</div>
</div>
color:gray;text-align:center;font-size:large">Fourth Column</div>
</div>
</div>
</div>
</body>
</html>
Here the output of above code:
Bootstrap Table
Here is the code to demonstrate use of bootstrap table class.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
</table>
</body>
</html>

Bootstrap Button Classes
Here is the code to demonstrate use of bootstrap button classes.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><button class="btn btn-default">btn-default</button></p>
<p><button class="btn btn-primary">btn-primary</button></p>
<p><button class="btn btn-success">btn-success</button></p>
<p><button class="btn btn-info">btn-info</button></p>
<p><button class="btn btn-warning">btn-warning</button></p>
<p><button class="btn btn-danger">btn-danger</button></p>
<p><button class="btn btn-link">btn-link</button></p>
</body>
</html>

Bootstrap Forms
The following are the classes that are used to style forms
form-group - Use this class on the <div> element that wraps labels and form controls for
optimum spacing
form-control - Use this class on all textual elements (<input>, <textarea>, and <select>)
Here the code example to understand the concept.

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div class="form-group">
<label for="txtName">Name</label>
<input class="form-control" placeholder="Name"
type="text" id="txtName" />
</div>
<div class="form-group">
<label for="txtpswd">Password</label>
<input class="form-control" placeholder="Password"
type="password" id="txtName" />
</div>
<button type="submit" class="btn btn-default">Click
Me</button>
</form>
</body>
</html>
Here is the output for above code.
There are many built in class in bootstrap for designing purpose. If you are interested to
learn more about bootstrap than please visit following link.
https://www.w3schools.com/bootstrap4/
Lab Task
Perform following task in lab.
Part 1: Create a Form using bootstrap styling classes. It must have following fields:
1. 1: IMEI Number 2: Operating System (android as well as iOS and populate dropdown from
database table named OS) 3: Released Date (Must not greater than today)
2. 4: Color (length must be great than 2 and less than 15) 5: Weight in grams
3. 6: Model Number 7: Ram (Must be greater than 1 GB and less than 8 GB)
4. 8: Price (Must be greater than 10,000 and less than 20, 0000)
Part 2: Form must have two button save and cancel. Apply Primary class on save Button and
Default class on Cancel button.

Bootstrap Introduction Bootstrap Benefits Setting Up Bootstrap Bootstrap Grid System Bootstrap Table and Button Classes Bootstrap Form Classes

Uploaded by

Copyright:

Available Formats

You might also like

Bootstrap Introduction Bootstrap Benefits Setting Up Bootstrap Bootstrap Grid System Bootstrap Table and Button Classes Bootstrap Form Classes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap Introduction Bootstrap Benefits Setting Up Bootstrap Bootstrap Grid System Bootstrap Table and Button Classes Bootstrap Form Classes

Uploaded by

Copyright:

Available Formats

Web Engineering (CS-666/CS-723)

Mr. Aftab Khan email id: aftab@biit.edu.pk Whatsapp# 0344-8184704

(Week 3) Lecture 5-6

Advantages of using bootstrap

Consistency: Bootstrap was developed by Twitter to encourage consistency across their

Following are the file in css folder.

I’ll discuss only two files here.

The code of index is as following.

Bootstrap Grid System

Here is the output of above code.

Here is the output of above code.

Here is the output of above code.

Here is the code for above Example.

Here the output of above code:

Here is the code to demonstrate use of bootstrap table class.

Here is the output of above code.

Bootstrap Button Classes

Here is the code to demonstrate use of bootstrap button classes.

Here is the output of above code.

Here the code example to understand the concept.

Here is the output for above code.

You might also like