Scribd
Upload
7K views5 pages

Bootstrap Handson

The document contains code snippets demonstrating different Bootstrap components including typography, responsive images, button groups, navbar, carousel, and panels. Headings (h1-h6) are used to demonstrate typography. Classes like img-responsive, img-circle, and img-thumbnail are used to make images responsive. Button groups of different sizes are displayed. A navbar with login/signup options and search is shown. A carousel with indicators and navigation arrows cycles through multiple images. Panels with heading, body, and footer sections are presented.

Uploaded by

Anzal Malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7K views5 pages

Bootstrap Handson

The document contains code snippets demonstrating different Bootstrap components including typography, responsive images, button groups, navbar, carousel, and panels. Headings (h1-h6) are used to demonstrate typography. Classes like img-responsive, img-circle, and img-thumbnail are used to make images responsive. Button groups of different sizes are displayed. A navbar with login/signup options and search is shown. A carousel with indicators and navigation arrows cycles through multiple images. Panels with heading, body, and footer sections are presented.

Uploaded by

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

1.

Typography

<!DOCTYPE html>
<html>
<head>
<title>typography</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>FrescoPlay</h1>
<h2>FrescoPlay</h2>
<h3>FrescoPlay</h3>
<h4>FrescoPlay</h4>
<h5>FrescoPlay</h5>
<h6>FrescoPlay</h6>
</body>
</html>

***********************************************************************************
*****

2. Responsive images

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img class="img-responsive"
src="https://upload.wikimedia.org/wikipedia/commons/8/85/Gfp-missouri-st-louis-
clubhouse-pond-and-scenery.jpg" alt="Fresco">
" alt="Fresco">
<img class="img-circle"
src="https://upload.wikimedia.org/wikipedia/commons/8/85/Gfp-missouri-st-louis-
clubhouse-pond-and-scenery.jpg" alt="Fresco">
" alt="Fresco">
<img class="img-thumbnail"
src="https://upload.wikimedia.org/wikipedia/commons/8/85/Gfp-missouri-st-louis-
clubhouse-pond-and-scenery.jpg" alt="Fresco">
" alt="Fresco">
</body>
</html>

***********************************************************************************
*****

3. Button groups

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-lg">
<button class="btn btn-default">Button1</button>
<button class="btn btn-default">Button2</button>
<button class="btn btn-default">Button3</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">Button1</button>
<button class="btn btn-default">Button2</button>
<button class="btn btn-default">Button3</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">Button1</button>
<button class="btn btn-default">Button2</button>
<button class="btn btn-default">Button3</button>
</div>

</body>
</html>

***********************************************************************************
*****
4. Navbar

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-head">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target =
"#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> Login </a> </li>
<li ><a href="#"> & </a> </li>
<li ><a href="#"> Signup </a> </li>
</ul>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder = "Search">
</div>
<button type="button" class="btn btn-default" aria-label = "Left Align">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</nav>

</body>
</html>

***********************************************************************************
*****

5. carousel
<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- <div id="carouselnew" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://images-na.ssl-images-
amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMI5BanXkFtZTgwMjMyODgxMzE@._V1_SX1500_CR0,0
,1500,999_AL_.jpg">
</div>
<div class="item">
<img src="https://images-na.ssl-images-
amazon.com/images/M/MV5BNDc1MGUyNzltNWRkOC00MjM1LWJjNjMtZTZlYWlxMGRmYzVlXkEyXkFqcGd
eQXVyMzU3MDEyNjk@._V1_SX1777_CR0,0,1777,999_AL_.jpg">
</div>
<div class="item">
<img src="https://images-na.ssl-images-
amazon.com/images/M/MV5BMTExMDk1MDE4NzVeQTJeQWpwZ15BbWU5MDM4NDM0ODAx._V1_SX1500_CR0
,0,1500,999_AL_.jpg">
</div>
</div>
</div> -->
<div id = "myCarousel" class = "carousel slide" data-ride="carousel">

<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>

<div class="carousel-inner">

<div class="item active">


<img style = "width:100px;" src="https://images-na.ssl-images-
amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMI5BanXkFtZTgwMjMyODgxMzE@._V1_SX1500_CR0,0
,1500,999_AL_.jpg">
</div>

<div class="item ">


<img style = "width:100px;" src="https://images-na.ssl-images-
amazon.com/images/M/MV5BNDc1MGUyNzltNWRkOC00MjM1LWJjNjMtZTZlYWlxMGRmYzVlXkEyXkFqcGd
eQXVyMzU3MDEyNjk@._V1_SX1777_CR0,0,1777,999_AL_.jpg">
</div>

<div class="item ">


<img style = "width:100px;" src="https://images-na.ssl-images-
amazon.com/images/M/MV5BMTExMDk1MDE4NzVeQTJeQWpwZ15BbWU5MDM4NDM0ODAx._V1_SX1500_CR0
,0,1500,999_AL_.jpg">
</div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">


<span class="glyphicon glyphicon-chevron-left"> </span>
<span class="sr-only">Pre</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>
</body>
</html>

***********************************************************************************
*****

6. panels

<!DOCTYPE html>
<html>
<head>
<title>Grab it!!!!</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Frescoplay</div>
<div class="panel-footer">footer</div>
</div>
</body>
</html>

You might also like