Bootstrap Utility Components

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 2135 red flag

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very good website easily. It is very Handy once you understand.
Recommendation
Read Bootstrap Progress Bars before this article.

Introduction

Please read Bootstrap Introduction 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">&times;</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">&times;</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">&times;</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
<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <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>
        </div>
    </div>
</div>
Now jumbotron inherits some of the container properties such as rounded corners. Run and see the change as following

 

Conclusion

In this article, we have seen different types of utility components in Bootstrap. Hope you understand it. If you have any doubts on this topic, please ask below.

Thanks for reading.

Regards,
Krishna.


Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)