Bootstrap Framework Hands-on Solution | TCS Fresco Play

Bootstrap Framework Fresco Play Hands-On Solutions

Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

Important: Total Hands-On Questions - 9 out of which you have to solve only 6 Question rest 3 are for practice purpose.

3 Practicing Problems are

1. Practice Tooltip Plug-in

2. Practice Popover Plugin

3. Practice Ordered Lists

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

1.Bootstrap-Typography(20 min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

<title>typography</title>

</head>

<body>

//write your code here

<div>

<h1>Notes Bureau</h1>

<h2>Notes Bureau</h2>

<h3>Notes Bureau</h3>

<h4>Notes Bureau</h4>

<h5>Notes Bureau</h5>

<h6>Notes Bureau</h6>

</div>

</body>

</html>

2.Bootstrap - Button Groups

File Name: index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//write your code here

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

<Button>Notes Bureau 1</Button>

<Button>Notes Bureau 2</Button>

<Button>Notes Bureau 3</Button>

</div>

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

<Button>Notes Bureau 1</Button>

<Button>Notes Bureau 2</Button>

<Button>Notes Bureau 3</Button>

</div>

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

<Button>Notes Bureau 1</Button>

<Button>Notes Bureau 2</Button>

<Button>Notes Bureau 3</Button>

</div>

</body>

</html>

3.Bootstrap - Navbar(40 min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

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

<button data-target="#navbarCollapse"></button>

<ul class="nav navbar-nav navbar-right"></ul>

<div id="navbarCollapse">

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

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

</form>

</div>

</nav>

</body>

</html>

4.Bootstrap - Panel(25 min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//write your code here

<div class="panel panel-default">

<div class="panel-heading">Notes Bureau</div>

<div class="panel-body">Notes Bureau</div>

<div class="panel-footer">Notes Bureau</div>

</div>

</body>

</html>

5.Bootstrap - Images(25 min)

File Name: index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<img class="img-responsive">

<img class="img-circle">

<img class="img-thumbnail">

</body>

</html>

6.Bootstrap - Carousel

File Name: index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// write your code

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

<ol class="carousel-indicators"> </ol>

<img><img><img>

<div class="carousel-inner">

<div class="item active"></div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left">Previous</span>

</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">

<span class="glyphicon glyphicon-chevron-right">Next</span>

</a>

</div>

</body>

</html>

___________________

Updated: 18-oct-22

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

Do this steps before pasting code after Run Tests to check the test cases passed

###################################

1. Bootstrap - Typography

####################################

<!DOCTYPE html>

<html>

<head>

<title>typography</title>

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

####################################

<!DOCTYPE html>

<html>

____________________

If you have any queries, please feel free to ask on the comment section.

If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.

MNC Answers

Bootstrap Framework Hands-on Solution | TCS Fresco Play

Post a Comment

Azure Virtual Machines MCQs Solution | TCS Fresco Play

Node.Js Essentials Hands-On Solutions | TCS Fresco Play

Python 3 Functions and OOPs MCQs Solution | TCS Fresco Play

List of Fresco Play courses with MCQ and Hands-on | TCS Fresco Play

Artillery - API Freighting MCQs Solution | TCS Fresco Play

MNC Answers