Buttons in Bootstrap part-1

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,

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

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

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.

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.

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.