> Bootstrap Hands-On Solutions - TECH UPDATE
Home / FRESCOPLAYTFACTOR / Bootstrap Hands-On Solutions

Bootstrap Hands-On Solutions

 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 Bootstrap Hands-On Solutions Reviewed by TECH UPDATE on April 19, 2021 Rating: 5

You May Also Like

12 comments:

  1. Unknown19 April 2021 at 19:35

    Bro there is an Error occurred in Button Group ,kindly update it

    ReplyDelete
  2. TECH UPDATE24 April 2021 at 02:20

    OK Updated, Check right now.

    ReplyDelete
  3. Anonymous24 April 2021 at 07:12

    Hi Bro, Can you please update here the handson for Selenium webdriver and cucumber if possible? Thanks in Advance!!!

    ReplyDelete
  4. Anonymous28 June 2021 at 23:21

    hey bro can you make blogpost for Devsecop handson

    ReplyDelete
  5. Anonymous8 August 2021 at 21:57

    Can you update the pending handson on bootstrap

    ReplyDelete
  6. Unknown1 September 2021 at 01:38

    Bro there are 2 more questions please provide the solutions for them.

    ReplyDelete
  7. Anonymous7 November 2021 at 16:37

    Thank you so much, HackerRank is annoying af.

    ReplyDelete
  8. Unknown18 November 2021 at 00:57

    The hands-on for navbar is not working could you please check?

    ReplyDelete
  9. Anonymous22 February 2022 at 22:20

    Hlw admin can you provide handson of typescript.

    ReplyDelete
  10. Unknown15 April 2022 at 22:04

    Hello , please provide javascript essentials hands on solution.

    ReplyDelete
  11. Anonymous21 January 2023 at 03:26

    Guys please I need Golang Handson solutions

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.