Calcite Bootstrap

Calcite Bootstrap is an Esri custom theme and a custom build system for Bootstrap 3. The theme is based on Calcite Web - a web adaptation of Calcite, the desktop framework for ArcGIS Pro. Calcite Bootstrap was built for developers who have experience working with Bootstrap and would like to use the Calcite theme in their web pages and apps.

To find out more about how to setup this theme or about the changes between v0.3.2 and the latest version, visit Get Started.

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.

Panel title

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

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

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


Button Class Style
.btn-default white button, blue text/border
.btn-primary blue button, white text
.btn-info white button, gray text
.btn-success green button, white text
.btn-warning yellow button, gray text
.btn-danger white button, red text/border
.btn-link transparent button, blue text

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.

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.

The best way to write accessible errors. If not doing it this way, errors should be sandwiched between associated label and 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.

<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

Tab pane content
Tab pane content
Tab pane content
Tab pane content
<!-- 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.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<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.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

For implementation of progress bars, refer to Bootstrap Documentation.

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.