Bootstrap Framework Fresco Play Hands-on Solutions

Bootstrap Framework Fresco Play Hands-On Solutions

Please follow the below steps before Run Tests to run your code successfully otherwise you will face some server issues even Hands-On code is correct.

Step 1: Run->Install

Step 2: Run->Run

Step 3: Run Tests

Bootstrap TypoGraphy:-

index.html: -

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

// Your Code Here

<div>
<h1> FrescoPlay </h1>
<h2> FrescoPlay </h2>
<h3> FrescoPlay </h3>
<h4> FrescoPlay </h4>
<h5> FrescoPlay </h5>
<h6> FrescoPlay </h6>
</div>

</body>

</html>

Bootstrap Images :-

Index.html: -

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//Your Code Here

<img class="img-responsive" src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gfp-missourl-st-louis-clubhouse-pond-and-scenery.jpg">

<img class="img-circle" src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gfp-missourl-st-louis-clubhouse-pond-and-scenery.jpg">

<img class="img-thumbnail" src="https://upload.wikimedia.org/wikimedia/commons/8/85/Gfp-missourl-st-louis-clubhouse-pond-and-scenery.jpg">

</body>

</html>

Bootstrap - Button Groups :-

Index.html:-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//Your Code Here

<div class="btn-group btn-group-lg">

<button type="button" class="btn btn-default"> Button1</button>

<button type="button" class="btn btn-default"> Button2</button>

<button type="button" class="btn btn-default"> Button3</button>

</div>

<div class="btn-group btn-group-sm">

<button type="button" class="btn btn-default"> Button1</button>

<button type="button" class="btn btn-default"> Button2</button>

<button type="button" class="btn btn-default"> Button3</button>

</div>

<div class="btn-group btn-group-xs">

<button type="button" class="btn btn-default"> Button1</button>

<button type="button" class="btn btn-default"> Button2</button>

<button type="button" class="btn btn-default"> Button3</button>

</div>

</body>

</html>

Bootstrap - Navbar:-

Index.html:-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// Your Code Here

<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="#"> Home </a> </li>

<li ><a href="#"> Contact us </a> </li>

<li ><a href="#"> About us </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>

Bootstrap Carousel:-

index.html:-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//Your Code Here

<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 src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMI5BanXkFtZTgwMjMyODgxMzE@._V1_SX1500_CR0,0,1500,999_AL_.jpg" alt = "Los Angeles" style = "width:100px;">

</div>

<div class="item ">

</div>

<div class="item ">

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

</div>

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

</body>

</html>

Bootstrap - Panels:-

Index.html:-

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//Your Code Here

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

Bootstrap Framework Fresco Play Hands-on Solutions