Bootstrap 3 Buttons

  • Use the button classes on an <a>, <button>, or <input> element.
  • Use any of the available button classes to quickly create a styled button.
  • Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Example Link

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

Button Styles

Use any of the available button classes to quickly create a styled button.

To achieve the button styles, Bootstrap has the following classes:

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

Example

        <!-- Standard button --> 
        <button type="button" class="btn btn-default">Default</button> 
        
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> 
        <button type="button" class="btn btn-primary">Primary</button> 
        
        <!-- Indicates a successful or positive action --> 
        <button type="button" class="btn btn-success">Success</button> 
        
        <!-- Contextual button for informational alert messages --> 
        <button type="button" class="btn btn-info">Info</button> 
        
        <!-- Indicates caution should be taken with this action --> 
        <button type="button" class="btn btn-warning">Warning</button> 
        
        <!-- Indicates a dangerous or potentially negative action --> 
        <button type="button" class="btn btn-danger">Danger</button> 
        
        <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 
        <button type="button" class="btn btn-link">Link</button>
    

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

The classes that define the different sizes are:
  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

The following example shows the code for different button sizes:

Example

        <button type="button" class="btn btn-primary btn-lg">Large button</button> 
        <button type="button" class="btn btn-primary">Default button</button> 
        <button type="button" class="btn btn-primary btn-sm">Small button</button> 
        <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
    

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Example

        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
        <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Example

        <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
        <button type="button" class="btn btn-default btn-lg active">Button</button>
    

Anchor element

Add the .active class to <a> buttons.

Example Primary link Link

        <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
    

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

Example

        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
        <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
    

Anchor element

Add the .disabled class to <a> buttons.

Example Primary link Link

        <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
    

Copyright 2016 by WebiBeris.com. All Rights Reserved.