> Bootstrap Hands-On Solutions - TECH UPDATE

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

4 comments:

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

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

    ReplyDelete

Powered by Blogger.