Download our latest MNC Answers Application at Play Store. Download Now
Home
Fresco Play
fresco play hands on answers

Bootstrap Framework Hands-on Solution (Updated 2024)


Disclaimer: The main motive to provide this solution is to help and support those who are unable to do these courses due to facing some issue and having a little bit lack of knowledge. All of the material and information contained on this website is for knowledge and education purposes only.

Try to understand these solutions and solve your Hands-On problems. (Not encourage copy and paste these solutions)

1. Bootstrap Framework 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="Chania">

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

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

</body>

</html>


2. Bootstrap Framework 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>


3. Bootstrap Framework 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>

<div class="container">

  <h1>FrescoPlay</h1>

  <h2>FrescoPlay)</h2>

  <h3>FrescoPlay</h3>

  <h4>FrescoPlay</h4>

  <h5>FrescoPlay</h5>

  <h6>FrescoPlay</h6>

</div>

</body>

</html>


4. Bootstrap Framework 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" role="group" aria-label="First group">

    <button type="button" class="btn btn-secondary">Button 1</button>

    <button type="button" class="btn btn-secondary">Button 2</button>

    <button type="button" class="btn btn-secondary">Button 3</button>

  </div>

  <div class="btn-group btn-group-sm" role="group" aria-label="Second group">

  <button type="button" class="btn btn-secondary">Button 4</button>

    <button type="button" class="btn btn-secondary">Button 5</button>

    <button type="button" class="btn btn-secondary">Button 6</button>

  </div>

  <div class="btn-group btn-group-xs" role="group" aria-label="Second group">

    

    <button type="button" class="btn btn-secondary">Button 7</button>

    <button type="button" class="btn btn-secondary">Button 8</button>

    <button type="button" class="btn btn-secondary">Button 9</button>

  </div>

</body>

</html>


5. Bootstrap Framework Carousel

<!DOCTYPE html>

<html>

<head>

<title>Grab it!!!!</title>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

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

  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMl5BanBnXkFtZTgwMjMyODgxMzE@.V1_SX1500_CR0,0,1500,999_AL_.jpg" alt="First slide">

    </div>

    <div class="item">

      <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMl5BanBnXkFtZTgwMjMyODgxMzE@.V1_SX1500_CR0,0,1500,999_AL_.jpgg" alt="Second slide">

    </div>

    <div class="item">

      <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjA3NTEwOTMxMV5BMl5BanBnXkFtZTgwMjMyODgxMzE@.V1_SX1500_CR0,0,1500,999_AL_.jpg" alt="Second slide">

    </div>

  </div>

  <!-- Left and right controls -->

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

</head>

<body>

  <nav class="navbar navbar-expand-lg">

    <a href="#" class="navbar-brand">Navbar</a>

    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div id="navbarCollapse" class="collapse navbar-collapse">

      <form class="navbar-form navbar-right">

        <div class="form-group has-feedback">

          <input type="text" class="form-control" placeholder="Search">

          <span class="glyphicon glyphicon-search"></span>

        </div>

      </form>

      <ul href="#" class="nav navbar-nav navbar-right">

        <li class="nav-item">

            <a href="#" class="nav-link">Users</a>

        </li>

        <li class="nav-item">

            <a href="#" class="nav-link">Prodcts</a>

        </li>

        <li class="nav-item">

            <a href="#" class="nav-link">Categories</a>

        </li>

      </ul>

    </div>

  </nav>

</body>

</html>

Post a Comment