if you are new to Bootstrap.
There are some Utility classes in
bootstrap.css. These are used to create some usable components in our browser.
Objective
The main objective of this article is to learn Bootstrap Utility classes such as jumbotron, well, alert etc.
Using Bootstrap code
We have some classes in bootstrap.css that are used in different scenarios. Lets see them one by one.
Well:
well is a simple class which looks like panel in Bootstrap.
<div class="well">
This is a <a href="#" class="label label-success">Well</a>
</div>Run the above code in your browser to see a well like below
Alert:
alert is for showing notifications and alerts in the browser. Below example shows simple alert message
<div class="alert alert-warning">
This is a Warning Notification
<a href="#" class="close" data-dismiss="alert">×</a>
</div>See the above code in your browser
You can hide it by clicking the close mark at the right.
We can also create alerts that are displayed in Google Chrome like below,
<div class="alert alert-info">
Do you want to make <b>Google Chrome</b> as your Default Browser
<a href="#" class="close" data-dismiss="alert">×</a>
<a href="#" class="btn btn-info btn-xs">Yes</a>
<a href="#" class="btn btn-info btn-xs">No</a>
</div>If you run the above code, you will see the following output in your browser
Lets try creating another one as shown below,
<div class="alert alert-success">
Do you want <b>Google Chrome</b> to..
<a href="#" class="close" data-dismiss="alert">×</a>
<div class="navbar-right">
<a href="#" class="btn btn-success btn-xs">Remember Password</a>
<a href="#" class="btn btn-success btn-xs">Never for this site</a>
</div>
</div>In the above code, we are setting buttons to the right that would be resulted as below
Pull-left, Pull-right, Text-muted and Clearfix:
These are used to adjust your content to keep it where ever you want.
<div class="pull-left">Text pulled to left</div>
<br /><hr />
<div class="pull-right">Text pulled to right</div>
<br /><hr />
<div class="text-muted">Text is Disabled.</div>
<hr />
<div class="clearfix">
<div class="pull-left">Left Content</div>
<div class="pull-right">Right Content</div>
</div>In the above code, we have used all of them. Run it and see the following output in your browser
Jumbotron:
Jumbotron is like a container in which we can place all our elements. Observe the below code of using jumbotron.
<div class="jumbotron">
<h1>Hello, Welcome to Bootstrap</h1>
<h3>Bootstrap is developed by Twitter Inc. which is used to design the websites with enormous look and feel.</h3>
<a href="http://getbootstrap.com/" class="btn btn-success btn-lg">Download Bootstrap</a>
<a href="#" class="btn btn-warning">Learn more on Bootstrap</a>
</div>This will gives the following result in your browser
We can make it some different such as rounded corners, formatting content etc. For that we have to use
container like below
Thanks for reading.
Krishna.