Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Chapter 5: Bootstrap Buttons

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 650
    Comment on it

    Bootstrap button tag represents a clickable button. For a default button, you need to use a .btn class, it has gray color with rounded corners and 1-pixel border. Bootstrap provide some more style button you can use that classes with .btn class.


    Below is a list with explanation of that seven classes-

    • .btn-default
    • .btn-primary
    • .btn-success
    • .btn-info
    • .btn-warning
    • .btn-danger
    • .btn-link


    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</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-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>

    This classes can be used with ancor tag (<a href=""></a>) and also input feild -

    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <button type="button" class="btn btn-info">Button</button>
    <input type="submit" class="btn btn-info" value="Submit">
    <input type="button" class="btn btn-info" value="Input">

    Button Sizes

    You can change the button size with below classes -

    • .btn-lg (For large button)
    • .btn-md (For medium button)
    • .btn-sm (for small button)
    • .btn-xs (And this for extra small button)


    Syntax for button classes -

    <button type="button" class="btn btn-* btn-*">Large</button>

    Block Level Buttons

    The .btn-block change a botton as block elements -

    <button type="button" class="btn btn-primary btn-block">Block Button</button>

    Button State

    To make disabled and enable (active) buttons you can use .disabled (unclickable) and .active class

    <button type="button" class="btn btn-primary disabled">Disabled </button>
    <button type="button" class="btn btn-primary active">Active </button>

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: