Bootstrap Buttons | Lessoncup Programming Blog

Monday, 18 April 2016

Bootstrap Buttons

Making Bootstrap Buttons in my previous lesson on Bootstrap i just presented the overview of Bootstrap, in this lesson i am giving full overview on Bootstrap Buttons in Bootstrap Buttons package we have variety of  Stylist Buttons , manage the button sizes , active and inactive status buttons, even we can use html elements as buttons



Default Buttons

Bootstrap Buttons Package we have seven types of Buttons by default in our bootstrap css file we have class name like .btn
  • .btn btn-default( it give a default button without any indication visual effect)
  • .btn btn-primary
  • .btn btn-success
  • .btn btn-warning
  • .btn btn-info
  • .btn btn-danger
  • .btn btn-link
<div class="btn btn-default">Default Button</div>
<div class="btn btn-primary">Primary Button</div>
<div class="btn btn-success">Success Button</div>
<div class="btn btn-info">Info Button</div>
<div class="btn btn-warning">Warning Button</div>
<div class="btn btn-danger">Danger Button</div>
<div class="btn btn-link">Link</div>


Manage Button Sizes

We have four button Sizes
  • .btn btn-lg
  • .btn btn-md
  • .btn btn-sm
  • .btn btn-xs
<div class="btn btn-primary btn-lg">Primary Button</div>
<div class="btn btn-success btn-md">Success Button</div>
<div class="btn btn-info btn-sm">Info Button</div>
<div class="btn btn-warning btn-xs">Warning Button</div>

Active Disabled Buttons

the Active mode button display pressed mode and Disabled button display unclickable
<div class="btn btn-danger btn-lg active">Active Button</div>
<div class="btn btn-success btn-lg disabled">Disabled Button</div>

Buttons With Icons

Bootstrap Provides 260 Glyphicons i  just used few of icons with buttons
<div class="btn btn-danger btn-lg">
<span class="glyphicon glyphicon-heart"></span> Love
</div>
<div class="btn btn-danger btn-lg active">
<span class="glyphicon glyphicon-trash"></span> Trash
</div>
<div class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-envelope"></span> Message
</div>
<div class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</div>

Live Demo

3 comments :

  1. Very detailed technical article. We would need a guy like you at Evo Essay for topics like this every once in a while. Please let us know what you think.

    ReplyDelete
  2. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving..find out more School website design uk

    ReplyDelete
  3. Awesome work.Just wanted to drop a comment and say I am new to your blog and really like what I am reading.Thanks for the share

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons