BootStrap Tutorial -- Coding
The below code includes example of
1) BootStrap - rows and columns
2) BootStrap - View port for responsive website in smaller devices
3) Jumbotron - The Heading element
4) Tables
5)Panels
6)Well
7)Image
8)Shadow effect
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-sca;e=1" charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.colored{
background: #99FF66;
}
.col1colored
{
background: #FFA07A
}
.col2colored
{
background: #FFA500
}
.col3colored
{
background: orange
}
.col4colored
{
background: yellow
}
.col5colored
{
background: #ccd8ff
}
.fontsize
{
font-size:200%;
}
.shadow
{
box-shadow: 5px 5px 5px grey;
}
</style>
</head>
<body>
<div class="container-fluid colored">
<h1>My First Bootstarp Page </h1>
<p> this is some text </p>
<div class="row">
<div class="col-md-6 col1colored">
<p class="bg-info fontsize">If you cannot do great things, do small things in a great way.</p>
</br>
<table class="table table-hover">
<thead>
<tr>
<th>Author</th>
<th>Quotes</th>
</tr>
</thead>
<tbody>
<tr>
<td> Oscar Wilde</td>
<td>"Be yourself; everyone else is already taken." </td>
</tr>
<tr>
<td> Dr. Seuss </td>
<td>"Don't cry because it's over, smile because it happened"</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6 col2colored">
<p class="bg-success fontsize">Great things are done by a series of small things brought together.</p>
</br>
<table class="table table-hover">
<thead>
<tr>
<th>Author</th>
<th>Quotes</th>
</tr>
</thead>
<tbody>
<tr>
<td> Robert Frost</td>
<td>"In three words I can sum up everything I've learned about life: it goes on." </td>
</tr>
<tr>
<td> Mahatma Gandhi </td>
<td>"Live as if you were to die tomorrow. Learn as if you were to live forever."</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 col3colored">
<div class="row">
<div class="col-md-4 col3colored">
<img src="12080.jpg" class="img-responsive img-rounded" style="width:130px; height=180px">
</div>
<div class="col-md-8 col3colored">
<h4>
<p>
"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment."
</p>
<p>
-- Ralph Waldo Emerson
</p>
</h4>
</div>
</div>
</div>
<div class="col-md-6 col4colored">
<div class="row">
<div class="col-md-4 col4colored">
<img src="3565.jpg" class="img-responsive img-rounded" style="width:130px; height=180px">
</div>
<div class="col-md-8 col4colored">
<h4>
<p>
"To live is the rarest thing in the world. Most people exist, that is all."
</p>
<p>
-- Oscar Wilde
</p>
</h4>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<h1>"The Wall Of thoughts"<h1>
</div>
<div class="well col5colored">
<img src="44566.jpg" class="img-responsive img-rounded" style="width:130px;height=180px">
</br>
<b>"No one can make you feel inferior without your consent."--Eleanor Roosevelt, This is My Story </b>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-info shadow">
<div class="panel-heading"> Day1 </div>
<div class="panel-body"> "Life is a tragedy when seen in close-up, but a comedy in long-shot."-- Charlie Chaplin</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-info shadow">
<div class="panel-heading"> Day2 </div>
<div class="panel-body"> "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover."-- H. Jackson Brown Jr</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-info shadow">
<div class="panel-heading"> Day3 </div>
<div class="panel-body"> "I am phenomenol"-- Anonymous</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-info shadow">
<div class="panel-heading"> Day4 </div>
<div class="panel-body">"The mind is every thing.What we thinl we become"-- Buddha</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment