Buttons in Bootstrap part-2

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 2067 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 Buttons in Bootstrap part-1 before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
Take a look at Bootstrap Buttons - I before this to understand easily as this is the continuation of that chapter.
So far we have seen buttons in Bootstrap and now lets do something more with them.

Objective

The main objective of this article is to learn the Button Groups and Button Toolbars in Bootstrap.
 

Using Bootstrap code

We have btn-group class in bootstrap.css that is used to group the buttons.
Observe the below example code of grouping buttons
<div class="btn-group">
    <button type="button" class="btn btn-primary">Copy</button>
    <button type="button" class="btn btn-primary">Copy all</button>
    <button type="button" class="btn btn-info">Paste</button>
    <button type="button" class="btn btn-danger">Clear</button>
</div>
The above code will gives you the following output in your browser


There is btn-group-vertical to arrange and group them in vertical manner.
<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Copy</button>
    <button type="button" class="btn btn-primary">Copy all</button>
    <button type="button" class="btn btn-info">Paste</button>
    <button type="button" class="btn btn-danger">Clear</button>
</div>
Change in the code like above gives the following change in your browser


Different Sizes of Button Groups:
There are different sizes of btn-group classes. They are btn-group-lg(forlarge button group), btn-group-sm(for small button group) and btn-group-xs(for extra small buttons).
<div>
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">Copy</button>
        <button type="button" class="btn btn-primary">Copy all</button>
        <button type="button" class="btn btn-info">Paste</button>
        <button type="button" class="btn btn-danger">Clear</button>
    </div>
    <hr />
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">Copy</button>
        <button type="button" class="btn btn-primary">Copy all</button>
        <button type="button" class="btn btn-info">Paste</button>
        <button type="button" class="btn btn-danger">Clear</button>
    </div>
    <hr />
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-primary">Copy</button>
        <button type="button" class="btn btn-primary">Copy all</button>
        <button type="button" class="btn btn-info">Paste</button>
        <button type="button" class="btn btn-danger">Clear</button>
    </div>
</div>
If you observe the above code, there are large, small and extra small button group classes which looks like below


Now, for vertical Button Groups,
<div>
    <div class="btn-group-vertical btn-group-lg">
        <button type="button" class="btn btn-primary">Copy</button>
        <button type="button" class="btn btn-primary">Copy all</button>
        <button type="button" class="btn btn-info">Paste</button>
        <button type="button" class="btn btn-danger">Clear</button>
    </div>
    <div class="btn-group-vertical btn-group-sm">
        <button type="button" class="btn btn-primary">Copy</button>
        <button type="button" class="btn btn-primary">Copy all</button>
        <button type="button" class="btn btn-info">Paste</button>
        <button type="button" class="btn btn-danger">Clear</button>
    </div>
    <div class="btn-group-vertical btn-group-xs">
        <button type="button" class="btn btn-primary">Copy</button>
        <button type="button" class="btn btn-primary">Copy all</button>
        <button type="button" class="btn btn-info">Paste</button>
        <button type="button" class="btn btn-danger">Clear</button>
    </div>
</div>
We have added vertical in the above code which result in following output


Checkbox and RadioButton Functionalities:
There are predefined classes for Checkbox and RadioButton in bootstrap.css.

For CheckBox Functionality,
<div class="btn-group" data-toggle="buttons">
    <span class="btn btn-danger">
        <input type="checkbox" name="options"> Audi
    </span>
    <span class="btn btn-danger">
        <input type="checkbox" name="options"> Mercedes
    </span>
    <span class="btn btn-danger">
        <input type="checkbox" name="options"> BMW
    </span>
    <span class="btn btn-danger">
        <input type="checkbox" name="options"> Ferrari
    </span>
</div>
In the above code, we are using checkbox class to perform Checkbox action.
Run the above code in your browser to see the output something like below

If you observe the above figure, Both Audi and Mercedes are Checked and remaining two are Unchecked.'

For RadioButton Functionality, Just replace checkbox with radio like in the below code. 
<div class="btn-group" data-toggle="buttons">
    <span class="btn btn-danger">
        <input type="radio" name="options"> Audi
    </span>
    <span class="btn btn-danger">
        <input type="radio" name="options"> Mercedes
    </span>
    <span class="btn btn-danger">
        <input type="radio" name="options"> BMW
    </span>
    <span class="btn btn-danger">
        <input type="radio" name="options"> Ferrari
    </span>
</div>
This code will gives you the RadioButton features in your browser as following

In the above figure, only Mercedes is checked and you are not allowed to check multiple which means the radio.

Button Toolbars:
We have btn-toolbar class in bootstrap.css which is used to create a toolbar. Lets see creating a toolbar with some elements through below code,
<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-home"></span></button>
        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-book"></span></button>
        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-gift"></span></button>
        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-calendar"></span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-camera"></span></button>
        <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-music"></span></button>
        <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-film"></span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-cog"></span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-collapse-down"></span></button>
        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-collapse-up"></span></button>
    </div>
</div>
In the above code, we are using some Glyphicons of Bootstrap as tool elements. If you run this code in your browser, you will see the output something like below


We can also place the Toolbar some elements like in panel, well etc.
Just observe the below code in which we are going to place our Toolbar in a Panel.
<div class="panel panel-primary">
    <div class="panel-heading"><p class="panel-title">ToolBox</p></div>
    <div class="panel-body">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-home"></span></button>
                <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-book"></span></button>
                <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-gift"></span></button>
                <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-camera"></span></button>
                <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-music"></span></button>
                <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-film"></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-cog"></span></button>
            </div>
            <div style="float:right;">
                <div class="btn-group">
                    <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-collapse-down"></span></button>
                    <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-collapse-up"></span></button>
                </div>
            </div>
        </div>
    </div>
</div>
This will places our toolbar in a Panel like in the below picture


Conclusion

In this article, we have seen Button Groups and Button Toolbars of Bootstrap. Hope you understand. we will see some more Bootstrap button actions with JavaScript. If you have any doubt in this topic, please feel free to ask below.

Thanks for reading.

Regards,
Krishna. 

Recommendation
Read Buttons in Bootstrap part-3 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

Login to post response

Comment using Facebook(Author doesn't get notification)