Bootstrap Hands-On Solutions
The main agenda of this solution is those who are unable to do this course due to facing some issues, a little bit of lack of knowledge on these hands-on questions. Try to understand these codes and solve your hands-On Problems. (Not encourage copy and paste these solutions)
The course of Bootstrap is 55190.
Tota Hands-On -- 9 Questions (Only 6 You should do remaining Three just practice purpose)
Practicing Problems
1. Practice Ordered Lists
2. Practice Tooltip Plug-in
3. Practice Popover Plugin
You need to follow these steps otherwise you will face some server issues even hands-On code is right.
Step 1: Run --- Install
Step 2: Run ---- Run
Step 3: Run Tests
1. Bootstrap - Typography:-
Code: -
<!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>
<div>
<h1> FrescoPlay </h1>
<h2> FrescoPlay </h2>
<h3> FrescoPlay </h3>
<h4> FrescoPlay </h4>
<h5> FrescoPlay </h5>
<h6> FrescoPlay </h6>
</div>
</body>
</html>
2. BootStrap - Images
Code: -
<!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/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>
3.Bootstrap - Button Groups
Code:-
<!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 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>
4.Bootstrap - Navbar
Code:-
<!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="#"> 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>
5. Bootstrap - carousel
Code:-
<!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 = "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 ">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNDc1MGUyNzltNWRkOC00MjM1LWJjNjMtZTZlYWlxMGRmYzVlXkEyXkFqcGdeQXVyMzU3MDEyNjk@._V1_SX1777_CR0,0,1777,999_AL_.jpg" alt = "Chicago" style = "width:100px;">
</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>
</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>
6. Bootstrap - Panels
Code:-
<!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>
Thank you
Bootstrap Hands-On Solutions
Reviewed by TECH UPDATE
on
April 19, 2021
Rating:

Bro there is an Error occurred in Button Group ,kindly update it
ReplyDeleteOK Updated, Check right now.
ReplyDeleteHi Bro, Can you please update here the handson for Selenium webdriver and cucumber if possible? Thanks in Advance!!!
ReplyDeleteOk, I will try
Deletehey bro can you make blogpost for Devsecop handson
ReplyDeleteCan you update the pending handson on bootstrap
ReplyDeleteBro there are 2 more questions please provide the solutions for them.
ReplyDeleteThank you so much, HackerRank is annoying af.
ReplyDeleteThe hands-on for navbar is not working could you please check?
ReplyDeleteHlw admin can you provide handson of typescript.
ReplyDeleteHello , please provide javascript essentials hands on solution.
ReplyDeleteGuys please I need Golang Handson solutions
ReplyDelete