Drift BootStrap 4, HTML, jQuery
  • Overview
  • Installation and Setup
    • Setup
    • Folders and Files Structure
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Input Group
    • Jumbotron
    • List Group
    • Navbar
    • Navs & Tabs
    • Pagination
    • Progress Bar
    • Scrollspy
    • Typography
  • Classic Version
    • Setup
    • Folders and Files Structure
    • Theme Customizaton
    • RTL Version
Powered by GitBook
On this page
  • Default Buttons
  • Button Types
  • Button With Different Sizes
  • Outline Buttons
  • Block Level Buttons
  • Button States
  • Checkbox Buttons
  • Radio Buttons
  • Toggle States

Was this helpful?

  1. Components

Buttons

PreviousBreadcrumbsNextButton Group

Last updated 5 years ago

Was this helpful?

Default Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</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-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Types

<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Button With Different Sizes

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

Outline Buttons

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Block Level Buttons

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

Button States

<button type="button" class="btn btn-secondary active">Default Button</button>
<a href="javascript:void(0)" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
<button type="button" class="btn btn-primary" disabled="">Primary buttonD</button>
<a href="javascript:void(0)" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Checkbox Buttons

<span class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="checkbox" checked=""> Checked
  </label>
</span>
<span class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary">
    <input type="checkbox"> Unchecked
  </label>
</span>

Radio Buttons

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary"> <input type="radio" name="options" id="option1">
        Radio
    </label>
    <label class="btn btn-primary active"> <input type="radio" name="options" id="option2" checked=""> Active
    </label>
    <label class="btn btn-primary"> <input type="radio" name="options" id="option3">
        Radio
    </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option4"> Radio
    </label>
    <label class="btn btn-outline-secondary active">
        <input type="radio" name="options" id="option5" checked=""> Active
    </label>
    <label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option6"> Radio
    </label>
</div>

Toggle States

<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
    Single toggle
</button>
<button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false">
    Single toggle
</button>