Scribd
Upload
5 views

lab5

This document serves as a tutorial on Bootstrap, a popular front-end framework for web development. It covers key components such as the grid system, jumbotrons, glyphicons, pagination, and carousels, providing examples of HTML code for each. Additionally, it includes lab tasks for applying Bootstrap features and themes in practical projects.

Uploaded by

faheem.ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

lab5

This document serves as a tutorial on Bootstrap, a popular front-end framework for web development. It covers key components such as the grid system, jumbotrons, glyphicons, pagination, and carousels, providing examples of HTML code for each. Additionally, it includes lab tasks for applying Bootstrap features and themes in practical projects.

Uploaded by

faheem.ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Hamdard Institute of Engineering & Technology


Hamdard University

Lab # 05
BOOTSTRAP
Objective:

 To learn about bootstrap.

Theory:

Bootstrap is a most popular front end framework in the recent time. It is sleek, intuitive, and powerful
mobile first front-end framework for faster and easier web development. It uses HTML, CSS and
Javascript. This tutorial will teach you the basics of Bootstrap 4 Framework, which you can create web
projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap
Layout, Bootstrap Grid System, Bootstrap Content, Bootstrap Components and Bootstrap Utilities. Each of
these sections contain related topics with simple and useful examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>

<div class="jumbotron text-center">


<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...</p>
</div>
<div class="col-sm-4">

Hamdard Institute of Engineering & Technology, Hamdard University


Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...</p>
</div>
</div>
</div>

</body>
</html>

Tables in Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"

Hamdard Institute of Engineering & Technology, Hamdard University


Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>

<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal
dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>
Images:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"

Hamdard Institute of Engineering & Technology, Hamdard University


Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>

<div class="container">
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in
IE8):</p>
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236">
</div>

</body>
</html>

Creating a Jumbotron
A jumbotron indicates a big box for calling extra attention to some special content or information. A
jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text
inside it.

Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap
elements/classes.

Use a <div> element with class .jumbotron to create a jumbotron:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>

<div class="container">
Hamdard Institute of Engineering & Technology, Hamdard University
Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

</body>
</html>

Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in text,
buttons, toolbars, navigation, forms, etc.

Here are some examples of glyphicons:

 Envelope glyphicon:
 Print glyphicon:
 Search glyphicon:
 Download glyphicon:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>

<div class="container">
<h2>Glyphicon Examples</h2>
Hamdard Institute of Engineering & Technology, Hamdard University
Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>

</body>
</html>

Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.A
basic pagination in Bootstrap looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
Hamdard Institute of Engineering & Technology, Hamdard University
Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>
<body>

<div class="container">
<h2>Pagination</h2>
<p>The .pagination class provides pagination links:</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

</body>
</html>

The Carousel Plugin

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).

Tip: Plugins can be included individually (using Bootstrap's individual "carousel.js" file), or all at once
(using "bootstrap.js" or "bootstrap.min.js").

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
</head>

Hamdard Institute of Engineering & Technology, Hamdard University


Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
<body>

<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->


<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>

<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>

<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>

<!-- Left and right controls -->


<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

</body>
</html>

Hamdard Institute of Engineering & Technology, Hamdard University


Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan
FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY
Hamdard Institute of Engineering & Technology
Hamdard University
Lab Task:

1. Apply Bootstrap through popover, scroll spy, Affix and filters.

2. Apply bootstrap example through CSS.

3. Use any theme and apply bootstrap thoroughly.

Hamdard Institute of Engineering & Technology, Hamdard University


Sharae Madinat al-Hikmah, Hakim Mohammad Said Road, Karachi - 74600, Pakistan

You might also like