Scribd
Upload
9 views4 pages

Lab 8

Uploaded by

ahmedxcheema
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views4 pages

Lab 8

Uploaded by

ahmedxcheema
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Bootstrap

Objective(s):

 To understand and learn how to make responsive web page using bootstrap.
 To understand how to work bootstrap classes.

Tool(s) used:

For example: Brackets, Notepade++.

Bootstrap:

Bootstrap is a free front-end framework for faster and easier web development. Bootstrap
includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap CDN:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jq
uery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bo
otstrap.min.js"></script>
Basic Example:

Syntax:
<div class="row">
<div class="col-md-1"> 1 </div>
<div class="col-md-1"> 2 </div>
<div class="col-md-1"> 3 </div>
<div class="col-md-1"> 4 </div>
<div class="col-md-1"> 5 </div>
<div class="col-md-1"> 6 </div>
<div class="col-md-1"> 7 </div>
<div class="col-md-1"> 8 </div>
<div class="col-md-1"> 9 </div>
<div class="col-md-1"> 10 </div>
<div class="col-md-1"> 11 </div>
<div class="col-md-1"> 12 </div>

Get Started: Classes:

 xs (used for phone screen).


 Sm (small) used for tablet.
 md(medium) used for desktop.
 Lg(large) used for large desktop.

Bootstrap table

 Striped Rows
 Bordered Table
 Hover Rows
 Condensed Table
 Contextual Classes
 Responsive Tables
Tasks:
Task 01. Time: 30 Minutes
Create this example using bootstrap classes.

Figure 08-1

Task 02. Time: 30 Minutes


Write bootstrap code given below screenshot.

Figure 08-2

Task 03. Time: 30 Minutes

Using given below bootstrap table classes, create table to your own choice.

 Bootstrap Basic Table


 Striped Rows
 Bordered Table
 Hover Rows
 Condensed Table
 Contextual Classes
 Responsive Tables

Task 04. Time: 30 Minutes


Using given below bootstrap classes for images.

 Rounded Corners
 Circle
 Thumbnail
 Responsive Images.

You might also like