Style Guide - - v1.4.80

Latest Production Latest Stage

Buttons

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

Anchor 
<button class="btn btn-default">Button</button>
<a class="btn btn-default">Anchor</a>
<input class="btn btn-default" value="Input" type="submit" />

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

Button Options

Button Modifier Class
btn btn-default
btn btn-primary
btn btn-secondary
btn btn-tertiary
btn btn-success
btn btn-info
btn btn-warning
btn btn-danger
btn btn-link

Button Sizes

There are three 4 sizes for buttons: Large, medium (default), small, and extra small. Simply apply the size modifier class for the desired size. There is also an additional modifier that will make the button take the full width of the container. It may be used with the any of the button size and style modifiers.

Button Code
<button type="button" class="btn btn-secondary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary">Default Button</button>
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>
<button type="button" class="btn btn-secondary btn-xs">Extra Small Button</button>

ibox

.ibox groups your content into "blocks" with a white background.

This is an ibox title

This is some content in the ibox.

This is an ibox with a drop shadow

You could call it shady if you wanted and that would be ok.

<div class="ibox">
  <div class="ibox-title">
    <h3>This is an ibox title</h3>
  </div>
  <div class="ibox-content">
    <p>This is some content in the ibox.</p>
  </div>
</div>

<div class="ibox ibox-shadow">
  <div class="ibox-title">
    <h3>This is an ibox with a drop shadow</h3>
  </div>
  <div class="ibox-content">
    <p>You could call it shady if you wanted and that would be ok.</p>
  </div>
</div>

ibox borderless

.ibox-borderless can be added to an ibox to remove the border between the title and content.

This is an ibox title

This is some content in the ibox.

This is an ibox with a drop shadow

You could call it shady if you wanted and that would be ok.

<div class="ibox ibox-borderless">
  <div class="ibox-title">
    <h3>This is an ibox title</h3>
  </div>
  <div class="ibox-content">
    <p>This is some content in the ibox.</p>
  </div>
</div>

<div class="ibox-borderless ibox-shadow">
  <div class="ibox-title">
    <h3>This is an ibox with a drop shadow</h3>
  </div>
  <div class="ibox-content">
    <p>You could call it shady if you wanted and that would be ok.</p>
  </div>
</div>

Radio Buttons

Horizontal Radio Buttons

<div class="form-group" show-errors>
    <label class="control-label">Do you like horizontal radio buttons?</label>
    <div class="radio">
      <label class="control-label">
        <input type="radio" class="form-control" name="doyou" value="true" required>Yes
      </label>
      <label class="control-label">
        <input type="radio" class="form-control" name="doyou" value="false" required>No
      </label>
    </div>
  </div>

Vertical Radio Buttons

<div class="form-group" show-errors>
    <label class="control-label">Do you like vertical radio buttons?</label>
    <div class="radio">
      <label class="control-label">
        <input type="radio" class="form-control" name="doyou" value="true" required>Yes
      </label>
    </div>
    <div class="radio">
      <label class="control-label">
        <input type="radio" class="form-control" name="doyou" value="false" required>No
      </label>
    </div>
  </div>