Button Group and Toolbar

Simple button group:

  
      <div class="btn-group" role="group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Center</button>
  <button type="button" class="btn">Right</button>
</div>

Button toolbars grouping multiple button groups together:

      
      
      
    

      
      
    

      
    

      <div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">1</button>
      <button type="button" class="btn">2</button>
      <button type="button" class="btn">3</button>
    </div>
  </div>
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">4</button>
      <button type="button" class="btn">5</button>
    </div>
  </div>
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">6</button>
    </div>
  </div>
</div>
    

Vertical button group:

  
      <div class="btn-group btn-group--vertical" role="group">
  <button type="button" class="btn">Top</button>
  <button type="button" class="btn">Center</button>
  <button type="button" class="btn">Bottom</button>
</div>

Buttons

Basic usage:

    
Click me!

      <button class="btn">Click me!</button>
<a class="btn">Click me!</a>
<input class="btn" type="button" value="Click me!">

Button styles:

    
      <button class="btn btn-primary">Click me!</button>
<button class="btn btn-success">Click me!</button>
<button class="btn btn-info">Click me!</button>
<button class="btn btn-warning">Click me!</button>
<button class="btn btn-danger">Click me!</button>

Loading button:

    
      <button class="btn btn-primary loading">Loading</button>

Active button:

    
      <button class="btn btn-primary active">Click me!</button>

Override active class as sometimes it might not be trivial to remove the active class.

    
      <button class="btn btn-primary active no-active-class">Click me!</button>

Checkbox

Styled checkboxes

  
  Check me out

      <div class="checkbox">
  <input  id="checkboxExample" type="checkbox">
  <label for="checkboxExample">Check me out</label>
</div>
    

Styled radios

  
  Radio 1
  
  Radio 2

      <div class="radio">
  <input  id="radioExample1" name="radioExample" type="radio">
  <label for="radioExample1" name="radioExample">Radio 1</label>
  <input  id="radioExample2" name="radioExample" type="radio">
  <label for="radioExample2" name="radioExample">Radio 2</label>
</div>
    

Form Group

Bootstrap-like Form-Group:

      <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <input  id="checkMeOut" type="checkbox">
    <label for="checkMeOut">
      Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
    

Inline-Form-Group:

    
    Email address
    
    Password
    
      Remember me
    
      <form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <input  id="rememberMe" type="checkbox">
    <label for="rememberMe">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Disabled form controls:

    
      Disabled input
      
      Disabled select menu
      
        Can't check this
      
      <form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <input id="cant-check-this" type="checkbox">
      <label for="cant-check-this">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>