Buttons in Bootstrap part-1

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 2747 red flag
Rating: 5 out of 5  
 1 vote(s)

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

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
Buttons are the key in any web application to perform an action or to switch pages. There are some predefined buttons in Bootstrap that can be used in our applications.

Objective

The main objective of this article is to learn different types of Buttons in Twitter Bootstrap.

Using Bootstrap code

We have btn class in bootstrap.css which is responsible to create Buttons in our applications. Lets create a simple button like below,
<div>
    <button type="button" class="btn btn-default">Button</button>
</div>
btn-default creates a normal simple button in your web page as below,

Different sizes of Buttons:
We have large, small, and extra small button classes in bootstrap.css. These are described in the below example,
<div>
    <button type="button" class="btn btn-default btn-lg">Large button</button>
    <button type="button" class="btn btn-default btn-sm">Small button</button>
    <button type="button" class="btn btn-default btn-xs">Extra Small button</button>
    <button type="button" class="btn btn-default">Default Button</button>
</div>
btn-lg(large button), btn-sm(small button) and btn-xs(extra small) are responsible for large, small and extra small buttons

Types of Buttons:
We have some predefined types of buttons such as primary, success, warning, danger and info which are of different types in terms of colors. They are shown in the below code
<div>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link Button</button>
</div>
The above code in your browser will gives different colors of buttons like below


Disabled Button:
In some scenarios, we have to disable the button to the user which doesn't been accessed by him.
<div>
    <a href="#" class="btn btn-info disabled">Disabled Button</a>
    <a href="#" class="btn btn-info">Normal Button</a>
</div>
disabled class above makes your button as disabled like below


Loading Button:
In some applications like making transactions, there is a need to disable button for some time after clicking it and enable automatically. For those type of buttons we need to write a little script in our page like below,
<script type="text/javascript">
    $(function () {
        $(".btn").click(function () {
            $(this).button('loading').delay(2000).queue(function () {
                $(this).button('reset');
                $(this).dequeue();
            });
        });
    });
</script>
And we have to give data-loading-text attribute in our button tag as did in the below code
<div>
    <button type="button" class="btn btn-success" data-loading-text="Please Wait...">Submit</button>
    <button type="button" class="btn btn-warning" data-loading-text="Processing..">Show Details</button>
</div>
Now., lets run this code in your browser to get the following output

In the above figure, it is clearly mentioned that what happens on the button click's.

Toggle Button:
What to do if need to make the button active on clicking it and toggling back with another click?

Simple, Just use data-toggle attribute as we have in the below code
<div>
    <button type="button" class="btn btn-info" data-toggle="button">Click Me</button>
    <button type="button" class="btn btn-danger" data-toggle="button">Click Me too</button>
</div>
This attribute will enables the toggling option for our buttons as shown below

Click the buttons and see their 'ON' and 'OFF' status.

Block Buttons:
Observe the below example code in which we added btn-block class which is responsible to create the block buttons in our web page
<div>
    <button type="button" class="btn btn-success btn-block">Accept</button>
    <button type="button" class="btn btn-danger btn-block">Decline</button>
</div>
If you run the above code snip, you might see the following output in your browser


Conclusion

In this article, we have seen different buttons of Twitter Bootstrap. Hope you understand. we will see Button Groups in the next chapter. If you have any doubts in this topic, please ask below.

Thank you for reading.
Recommendation
Read Buttons in Bootstrap part-2 after this article.
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

Posted by: Prabhupr on: 7/1/2014 | Points: 25
Below listed sample code of yours DID NOT work
<script type="text/javascript">

$(function () {
$(".btn").click(function () {
$(this).button('loading').delay(2000).queue(function () {
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>

Posted by: Goud.Kv on: 7/1/2014 | Points: 25
Hello Jack.,
Thanks for your response.
Please add these lines to your page and try
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>


Thanks,
Krishna

Login to post response

Comment using Facebook(Author doesn't get notification)