There are four types of alerts: .alert-info,.alert-success,.alert-warning,.alert-danger.

Writing an alert looks like:

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>

Panels may also be given alert states; however, a panel alert state only affects the .panel-heading and border-color, so stick with alerts in error handling and form validation.

<div class="panel panel-success">
  <div class="panel-heading">
      <h3 class="panel-title">
         Panel title
      </h3>
  </div>
  <div class="panel-body">
         Panel content
  </div>
</div>

Badges can be added to stand-alone links or used within Navs.

Inbox 42

• Home 42
• Profile
• Messages 3

<a href="#">Inbox <span class="badge">42</span></a>

To achieve breadcrumb styling, use an ordered list with the .breadcrumb class. This will inject the forward slash in between link items as well as bold the active item.

1. Home
2. Library
3. Data

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

Example using the <blockquote></blockquote> tags.

This is simply a <p> with the .lead class on it.

There are 7 types of buttons.

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Button size can be changed by including .btn-xs, .btn-sm, and .btn-lg. By default all buttons and inputs use the equivalent of .btn-md/.input-md, although this is not explicitly set.

  <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>

Anything using button classes can be disabled. Both <button> and <a> will require the .disabled class in order to inherit disabled styling. However, only actual <button> can be disabled from selection with the disabled property. Rather than attempting to disable a link with button classes, one should use the .btn-link class to make their <button> appear to be a text link instead.

Default Primary Success Info Warning Danger Link

Link Link Link Link Link Link

Link Link Link Link Link Link

For implementation of carousel, refer to Bootstrap Documentation.

Carousels require inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

For implementation of dropdown menu, refer to Bootstrap Documentation.

Dropdown menus require inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

All related form elements belong inside a .form-group. This may include a <label>,<input>, and a <span> containing errors or help text. By appending .has-error,.has-warning, or .has-success on the .form-group, this will change the input border color to the corresponding warning and any <span> tags containing the .help-block class to the matching text-color of that input border. (When using .help-block, it must be used on <span> tags to inherit error colors. <div> will not work.)

It is important to also use a for attribute on the label with a matching id on the input to associate the <label> with the <input> for assistive technologies. In addition, using aria-describedby with a matching id on any error messages will make sure assistive technologies relate the error to the correct input.

<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">The best way to write accessible errors. If not doing it this way, errors should be sandwiched between associated label and input.</span>
</div>

Labels can be hidden from sighted users, but stay present for assistive technologies by using the .sr-only class on the <label>.

<div class="form-group">
  <label class="control-label sr-only" for="thing1">Home Address</label>
  <input type="text" class="form-control" placeholder="Home Address" id="thing1">
</div>

Alert Symbology

To display alert style icons, the .with-addon-alert class must be added to the <input> and the <span> displaying the glyphicon must use the corresponding .input-group-addon and as above there should be an aria-describedby on the <input> that associates it with an id on the <span>.

<div class="input-group has-error">
  <label class="control-label sr-only" for="inputError2">Input with error</label>
  <input type="text" class="form-control with-addon-alert" placeholder="Email Address" id="inputError2" aria-describedby="error-state-addon">
  <span class="input-group-addon" id="error-state-addon"><i class="glyphicon glyphicon-alert" aria-label="error occurred"></i></span>
</div>

<div class="input-group has-warning">
  <label class="control-label sr-only" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control with-addon-alert" placeholder="Service Start Date" id="inputWarning2" aria-describedby="warning-state-addon">
  <span class="input-group-addon" id="warning-state-addon"><i class="glyphicon glyphicon-exclamation-sign" aria-label="non-valid format"></i></span>
</div>

<div class="input-group has-success">
  <label class="control-label sr-only" for="inputSuccess2">Input with success</label>
  <input type="text" placeholder="Pet's Name" class="form-control with-addon-alert" id="inputSuccess2" aria-describedby="success-state-addon">
  <span class="input-group-addon" id="success-state-addon"><i class="glyphicon glyphicon-ok" aria-label="well done"></i></span>
</div>

Labels look very similar to badges, but use a less exaggerated border-radius and use the same colors for default, primary, success, info, warning, and danger as seen on buttons.

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

<span class="label label-primary">Primary</span>

Calcite Web uses a gray stacked sidebar for tertiary navigation. This style can be achieved with a .list-group containing .list-group-items made into links.

Supplemental classes that may be used within a .list-group-item are .list-group-item-heading and .list-group-item-text.

Modal structure is very important to achieving a Calcite look. Within .modal-content there must be a .modal-header that contains the .close button and modal titles must use the <h4> element. In addition, the modal needs to use .modal-body for the main content and .modal-footer for any action buttons. If these three inner modal regions are not used, then the padding for entire modal will not be consistent.

Cancel or Close buttons should use .btn-default and be positioned to the left of the dominant action button, which should use .btn-primary.

For implementation of modals, refer to Bootstrap Documentation.

Note: Modal styling has been hacked to show example.

Modals require inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

<div class="modal fade" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">x</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

To achieve the classic Calcite top navigation style, use Bootstrap's .navbar-default in conjunction with .navbar-fixed or .navbar-static to set whether it should remain affixed to the top of the page or scroll with the page. Using .navbar-inverse rather than .navbar-default will produce a dark gray navbar with white text. Use of the .container class within the navbar will keep navigation from going beyond a fixed width. Use of .container-fluid will produce a fluid-width navbar.

The collapsing functionality of navbars requires inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Bootstrap theme</a>
    </div>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!-- /.container -->
</nav><!-- /.navbar -->

.nav-pills is recommended for inline tertiary navigation in full-page layouts and can be used in conjunction with .nav-stacked to get a style very similar to the mobile view of .navbar-default.

• Home
• Profile
• Messages

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

For secondary navigation, .nav-tabs[role="navigation"] should be used for subnav within the navbar experience and .nav-tabs[role="tablist"] for standard tab interfaces. Wrapping .nav-tabs in .secondary-nav will remove the nav-tab bottom border for a cleaner line.

<div class="secondary-nav">
  <ul class="nav nav-tabs" role="navigation">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>
</div>

Tab panes require inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

• Home
• Profile
• Messages
• Settings

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">Tab pane content</div>
  <div role="tabpanel" class="tab-pane" id="profile">Tab pane content</div>
  <div role="tabpanel" class="tab-pane" id="messages">Tab pane content</div>
  <div role="tabpanel" class="tab-pane" id="settings">Tab pane content</div>
</div>

For implementation of pagination, refer to Bootstrap Documentation.

For implementation the pager, refer to Bootstrap Documentation.

Panels are composed of three parts: .panel-heading,.panel-body, and .panel-footer; however, unlike modals, a given panel may include only one or all of these parts.

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">
    Panel footer
  </div>
</div>

For implementation of popovers, refer to Boostrap Documentation.

Popovers require inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Note: Popover styling has been hacked to show example, do not use the code of this popover.

For implementation of progress bars, refer to Bootstrap Documentation.

All table styling should be handled automatically, except for .blue-table which is an additional class within the calcite-bootstrap-expansion.scss file that will achieve the blue table seen in Calcite Web.

Table customizations may occur by overwriting the table variables set by Calcite Bootstrap. For those using SASS, $table-bg-accent controls the alternating background row color. To get a mobile-friendly table, adding a <div class="table-responsive"></div> around a <table> will allow horizontal scrolling of the table on small devices.

Alert background colors can also be added to table rows or cells by using .active,.success,.info,.warning,.danger.

For implementation of tables, refer to Bootstrap Documentation.

For implementation of progress bars, refer to Bootstrap Documentation.

Tooltips require inclusion of Bootstrap 3.3 Javascript: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Note: Tooltip styling has been hacked to show example, do not use the code of this tooltip.