Q) Create a story page for children that encloses a children story inside a bootstrap well container.
The layout of the page must be as shown below
Concepts Covered:- Well, Glyphicons, Helper classes for bootstrap
Notes:-
Create a story layout as depicted in the image. The image is attached.
Create div tags for classes container and well
The story must be enclosed inside the well
Create appropriate div tags for glyphicons print ,search and envelope
Print and Envelope must be links
Search must be embedded inside a button
Create a div for the footer with an alert danger class to hold the copyright information
My code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Childrens story for the day</h2>
<div class="well">
A fox passed by a grapevine winding around the branches of a tree. He saw a bunch of grapes hanging above. He jumped to snatch some grapes. But the grapes were too high for him. "You have to grow up fox," said a monkey living on the tree; "here take some grapes."The monkey shook the branch and a few grapes fell out. The fox caught them neatly in his mouth. "Are they sweet?" asked the monkey. "Not so sweet,"the fox said as he walked away. The next day, the fox came by the tree again. He took a look at the bunches of grapes hanging above. He took a short run and jumped. This time he could jump higher, but not high enough to get at the grapes. The friendly monkey pressed down the branch, helping the fox snatch one or two grapes as they fell."Is it sweet?" asked the monkey."Not so sweet,"said the fox as he walked away. The next day, the fox was back.This time he looked determined to get the grapes.
</div>
<a id="gly1" href="#" class=" btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print this story
</a>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search for new stories
</button>
<a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this story</a>
</div>
<br>
<div id="foot" class="alert alert-danger">
<strong>Copyright Information :- </strong> Do not copy or reproduce
</div>
</body>
</html>
Here is the exact code that will work, the error is not in the print class the error is that you are closing the container div before it should be closed. you need to put the container ending div just before the ending body tag
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Childrens story for the day</h1>
<div class="well">
A fox passed by a grapevine winding around the branches of a tree. He saw a bunch of grapes hanging above. He jumped to snatch some grapes. But the grapes were too high for him. "You have to grow up fox," said a monkey living on the tree; "here take some grapes."The monkey shook the branch and a few grapes fell out. The fox caught them neatly in his mouth. "Are they sweet?" asked the monkey. "Not so sweet,"the fox said as he walked away. The next day, the fox came by the tree again. He took a look at the bunches of grapes hanging above. He took a short run and jumped. This time he could jump higher, but not high enough to get at the grapes. The friendly monkey pressed down the branch, helping the fox snatch one or two grapes as they fell."Is it sweet?" asked the monkey."Not so sweet,"said the fox as he walked away. The next day, the fox was back.This time he looked determined to get the grapes.
</div>
<a id="gly1" href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print this story
</a>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search for new stories
</button>
<a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this story</a>
<div id="foot" class="alert alert-danger">
<strong>Copyright Information :- </strong> Do not copy or reproduce
</div>
</div>
</body>
</html>