Bootstrap Components

Views UI Bootstrap Components

This page demonstrates all of the Bootstrap components that we’ve extended for the the Views UI library. The Bootstrap library itself is unchanged, so Bootstrap elements not found on this page should work — they won’t look great, but will work for quick fixes and protoyping, after which we can bring them visually into line with the rest of the Views UI library.

Deviations from Bootstrap

When there are deviations from Bootstrap we list them here and link to documentation in the relevant section below. Here’s the current list of deviations:

Radio and checkbox inputs

Forms [bootstrap docs]

Basic Example [bootstrap docs]

Inline Form [bootstrap docs]

Horizontal Form [bootstrap docs]

Inputs [bootstrap docs]

Textarea [bootstrap docs]

Checkboxes and Radios [bootstrap docs]

Checkbox and radio inputs have to be marked up slightly differently from the Bootstrap docs so that we can style them — the input isn’t wrapped by the label, the input appears directly before the label, and the label’s for attribute is correctly set to the ID of the input:

<div class="checkbox">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Remember me</label>
</div>

<div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
    <label for="optionsRadios1">Option one is this</label>
</div>

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Selects [bootstrap docs]

Example select

Example multiple select

File input This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Static Control [bootstrap docs]

Disabled Controls [bootstrap docs]

Disabled Fieldsets [bootstrap docs]

Validation States [bootstrap docs]

Input with success A block of help text that breaks onto a new line and may extend beyond one line.

Input with warning

Input with error

Checkbox with success

Checkbox with warning

Checkbox with error

Input Groups [bootstrap docs]

@example.com

Your vanity URL

https://example.com/users/

$ .00

$ 0.00

Buttons [bootstrap docs]

Button Variations [bootstrap docs]

Block Level Buttons

Disabled Buttons

Button Groups [bootstrap docs]

Dropdown [bootstrap docs]

Dropdown

Alerts [bootstrap docs]

Alert States [bootstrap docs]

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Dismissable Alert [bootstrap docs]

Warning! Better check yourself, you're not looking too good.

Alerts With Links [bootstrap docs]

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Panels [bootstrap docs]

Basic Panel [bootstrap docs]

Basic panel example

Panel With Heading [bootstrap docs]

Panel heading without title

Basic panel example

Panel title

Basic panel example

Panel With Footer [bootstrap docs]

Panel content

Panel footer

Contextual Alternatives [bootstrap docs]

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel With Table [bootstrap docs]

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

First Name	Last Name	Column Title	Column Title	Column Title	Column Title
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry

Wells [bootstrap docs]

Well

Some content in a well.

Modals [bootstrap docs]

Basic Modal [bootstrap docs]

Modal Size Variations [bootstrap docs]

Modal Theme Variations

Tables [bootstrap docs]

Basic Table

Note: A table can be enhance with the Datatables component but adding the class datatable to the table.

First Name	Last Name	Column Title	Column Title	Column Title	Column Title
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry
Marisa	Smith	Field Entry	Field Entry	Field Entry	Field Entry

When extending tables with the DataTables library, use these components.

Views

Views UI Bootstrap Components

Deviations from Bootstrap

Forms [bootstrap docs]

Basic Example [bootstrap docs]

Inline Form [bootstrap docs]

Horizontal Form [bootstrap docs]

Inputs [bootstrap docs]

Textarea [bootstrap docs]

Checkboxes and Radios [bootstrap docs]

Selects [bootstrap docs]

Static Control [bootstrap docs]

Disabled Controls [bootstrap docs]

Disabled Fieldsets [bootstrap docs]

Validation States [bootstrap docs]

Input Groups [bootstrap docs]

Buttons [bootstrap docs]

Button Variations [bootstrap docs]

Block Level Buttons

Disabled Buttons

Button Groups [bootstrap docs]

Dropdown [bootstrap docs]

Dropdown

Alerts [bootstrap docs]

Alert States [bootstrap docs]

Dismissable Alert [bootstrap docs]

Alerts With Links [bootstrap docs]

Panels [bootstrap docs]

Basic Panel [bootstrap docs]

Panel With Heading [bootstrap docs]

Panel title

Panel With Footer [bootstrap docs]

Contextual Alternatives [bootstrap docs]

Panel title

Panel title

Panel title

Panel title

Panel title

Panel With Table [bootstrap docs]

Wells [bootstrap docs]

Well

Modals [bootstrap docs]

Basic Modal [bootstrap docs]

Modal Size Variations [bootstrap docs]

Modal Theme Variations

Tables [bootstrap docs]

Basic Table

Tab Bar [bootstrap docs]

Basic Tab Bar