FORMS

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Inline form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

Input and Label

Include for an input and label with an optional label addon which will render any provided markup aligned right.

    
      {% include components.groups.forms.inputAndLabel with {
        id: 'address',
        mainLabel: 'Address',
        type: 'text',
        required: null,
        haslabelErrorIcon: true,
        hasInlineErrorIcon: null,
        hasAbsoluteErrorIcon: null,
        theValue: '',
        placeholder: 'Address Line 1'
      } %}
    
  

Select and Label

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

  {% include components.groups.forms.checkboxAndLabel with {theValue: 'Option1', label: "Option one is this and that—be sure to include why it's great"} %}
  

Inline checkboxes

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Radio and Select Picker

Include for a radio with a select picker include as the 'value'

    
      {% set selectPicker %}
      

      {% endset %}

      {% include '_includes/groups/forms/radio-and-select.html.twig' with {
        id: 'myId',
        name: 'myName',
        theLabel: selectPicker,
        checked: false
      } %}
    
  

Static control

When you need to place plain text next to a form label within a horizontal form, use the .form-control-static class on a <p>.

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Help text

Block level help text for form controls.

Dropdowns

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Headers

Add a header to label sections of actions in any dropdown menu.

Disabled menu items

Add .disabled to a <li> in the dropdown to disable the link.

Button groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Basic example

Wrap a series of buttons with .btn in .btn-group.

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

With <a> elements

Just wrap a series of .btns in .btn-group.btn-group-justified.

With <button> elements

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can workaround that.

50 / 50 button groups

Make two buttons stretch at equal sizes to span the entire width of its parent with a gutter in between. When only one button is visible, the individual button will remain 50% width but have a centered position.

To use 50/50 button groups, you must wrap each button in a button group.

Alternate Stacking

Add the class btn-group-alt-stack to reverse the vertical stacking order when buttons are 100% width on small screens.

50 / 50 Contained

Adding class btn-group-50-50--contained will make the 50 / 50 buttons behave a little different. Buttons are aligned left with auto width on large screens, while padding is modified so that the buttons can sit side-by-side down to smaller screen sizes. This is ideal when buttons are contained in a module, as shown below.

Button dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Sizing

Button dropdowns work with buttons of all sizes.

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Checkboxes and radio addons

Place any checkbox or radio option within an input group's addon instead of text.

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Buttons with dropdowns

Segmented buttons

Navs

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Tabs

Note the .nav-tabs class requires the .nav base class.

Pills

Take that same HTML, but use .nav-pills instead:

Pills are also vertically stackable. Just add .nav-stacked.

Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked. Use the modifier .nav-justified--inline for justified nav that doesn't collapse to a stack below 768px, ideal for justified nav with only two items.

Disabled links

For any nav component (tabs or pills), add .disabled for gray links and no hover effects.

Using dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

Pills with dropdowns

Navbar

Default navbar

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Drawer navbar

Brand navbar

Inverse navbar

Forms

Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.

As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

Buttons

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

Non-nav links

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

Component alignment

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Fixed to top

Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.

Fixed to bottom

Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.

Static top

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.

Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

Inverted navbar

Modify the look of the navbar by adding .navbar-inverse.

Navbar

Drawers

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

Separators are automatically added in CSS through :before and content.

Generate this automatically with Twig

    {% include components.groups.navigation.breadcrumbs with {
      'classes':'hidden-xs',
      'items': [{
          'slug': '#',
          'label': 'Home'
        }, {
          'slug':  '#',
          'label': 'Library'
        }, {
          'slug':  '#',
          'label': 'Data'
        }
      ]
    }%}
  

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

Aligned links

Alternatively, you can align each link to the sides:

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default example

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Custom content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Caption in front of thumbnail

Just add the class thumbnail--caption-in-front.

Thumbnail label

Thumbnail label

Thumbnail label

Boxes

Emphasis Box

Adds shadow and rounded corners

Primary Box Group

On tablet forces boxes to stack in groups of two.

     {% include "_includes/groups/boxes/primary/item-container.html.twig" with {
      hasToolbar: null,
      items: {
        item1: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item2: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item3: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item4: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item5: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item6: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item7: {
          imgPath: 'data-src="holder.js/220x250"'
        },
        item8: {
          imgPath: 'data-src="holder.js/220x250"'
        }
      }
    } %}
  

Primary Box Group with Carousel

Builds on Primary Box Group by putting it inside a carousel.

     {% include "_includes/groups/boxes/primary/carousel-container.html.twig" with {
    carouselId: 'carousel-demo-1',
    hasToolbar: null,
    items: {
     item1: {
        imgPath: 'data-src="holder.js/220x250"'
      },
      item2: {
        imgPath: 'data-src="holder.js/220x250"'
      },
      item3: {
        imgPath: 'data-src="holder.js/220x250"'
      },
      item4: {
        imgPath: 'data-src="holder.js/220x250"'
      }
    }
  } %}
  

Primary Box Group with Carousel - Alt

This hides the carousel on tablet and above.

     {% include "_includes/groups/boxes/primary/carousel-container.html.twig" with {
    carouselId: 'carousel-demo-2',
    itemContainerType: 'carouselBoxesCombo',
    items: {
     item1: {
        imgPath: 'data-src="holder.js/220x250"'
      },
      item2: {
        imgPath: 'data-src="holder.js/220x250"'
      },
      item3: {
        imgPath: 'data-src="holder.js/220x250"'
      },
      item4: {
        imgPath: 'data-src="holder.js/220x250"'
      }
    }
  } %}
  

Secondary Box Group

A box group that should be used with flex items. Title at the top, image below.

.img-respnsive within the group has some constraints that work well for uniformity. The boxes will be 100% on monile, 50% on tablet, and 33% on desktop.

Box Title 1

Box Title 2

Box Title 3

Box Title 4

Single Box Group

For enclosing a single box in a group container. The inner box has a two column flex layout ideal for and image on the left and other content right.

It collapses gracefully into a column on smaller screens.

Lydia Washington

Issaquah, WA

With Avon Since:

Email:

Phone Number:

Nov 16, 2000

lydiachancelorwashington@gmail.com

(555) 555-1234

Media object

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default media

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Simple example

The most simple list group is an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

Variations

Add a modifier class for list group variations.

.list-group--basic is a simplified list group with no borders and plain text.

Panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Panel with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

If there is no panel body, the component moves from panel header to table without interruption.

With list groups

Easily include full-width list groups within any panel.

Wells

Default well

Use the well as a simple effect on an element to give it an inset effect.

Optional classes

Control padding and rounded corners with two optional modifier classes.