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 class="btn btn-danger btn-lg active">
<span class="glyphicon glyphicon-trash"></span> Trash
<div class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-envelope"></span> Message
<div class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search

Live Demo


  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.

  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

  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

  4. Bootstrap 5 Button component. Catches give predefined styles to multiple catch types. Use MDB custom catch styles for actions in structures, exchanges, and more with help for multiple sizes, states, and then some.

  5. Your contents are too straightforward to browse and easy to understand.
    user experience design firms

  6. เป็นแบรนด์รวมค่ายเกมส์สล็อต betflixauto ชั้นนำของทั่วประเทศมารวมกัน พร้อมระบบการเล่น เกมค่าย betflix789 ทำงานด้วยระบบออโต้ ได้พัฒนาอย่างต่อเนื่อง เพื่อความรวดเร็ว


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons