Bootstrap:
Bootstrap 3 is a free, open- source and intuitive mobile first front-end framework for quicker and easier web development.
It was developed by Jacob Thornton and Mark Otto at Twitter
Bootstrap uses CSS HTML and JavaScript
Bootstrap allows you to create responsive web designs with ease
Bootstrap – Hands-on – Typography Answer:
Implement bootstrap typography.
Answer:
<h1>FrescoPlay<h1>
<h2>FrescoPlay<h2>
<h3>FrescoPlay<h3>
<h4>FrescoPlay<h4>
<h5>FrescoPlay<h5>
<h6>FrescoPlay<h6>
Bootstrap 3
Bootstrap – Hands-on – Images Answer:
Implement Bootstrap image concepts
1. default responsive image
2. Image in circle shape
3. Image as a thumbnail
Answer:
<img class=”img-responsive” src=”/img_fresco.jpg” alt=”Fresco”>
<img class=”img-circle” src=”/img_fresco.jpg” alt=”Fresco”>
<img class=”img-thumbnail” src=”/img_fresco.jpg” alt=”Fresco”>
Bootstrap – Hands-on – Navbar Answer:
Create a basic nav bar with a drop down and search bar, it should be responsive
Use class navbar-brand for brand name
- Use id “navbarCollapse” for div which contains all the elements in navbar
- Use glyphycon for search button
- drop down should have at least 3 options
Answer:
<body>
<nav class=”navbar navbar-default”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button data-target=”#navbarCollapse”></button>
<div id=”#navbarCollapse”>
<form class=”navbar-form navbar-right>
<input type=”text” class=”form-control” placeholder=” ”>
<span class=”glyphicon glyphicon-search></span>
</form>
</div>
<ul class=”nav navbar- nav navbar-right”></ul>
</div>
</nav>
</body>
Bootstrap – Hands-on – Carousel Answer:
Create bootstrap carousel as with at least 3 images in the carousel
Answer:
<body>
<div class=”carousel slide data-ride=”carousel”>
<ol class=”carousel-indicators”></ol>
<img src=”https://sample.jpg”></img>
<div class=”item active”></div>
</div>
<a class=”left carousel-control”><span class=”glyphicon glyphicon-chevron-left”></span></a>
<a class=”right carousel-control”><span class=”glyphicon glyphicon-chevron-right”></span></a>
</div>
</body>
Bootstrap – Hands-on – Panels Answer:
Implement bootstrap default panel with header, body and footer
Answer:
<div class=”panel panel-default”>
<div class=”panel-heading”>
Title
</div>
<div class=”panel-body”>
Fresco Play
</div>
<div class=”panel-footer”>
Footer
</div>
</div>
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.
