CSS

Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.

HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
	...
</html>

Mobile first

With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Color schemes

Basic color scheme

	`$cool-blue`, `$base-color`, `$primary-color`		`$slate`, `$secondary-color`
	`$dusk-blue` Hover states		`$text-color` All text
	`$brand-danger` danger, error		`$brand-warning` warning
	`$brand-success` confirmation, success		`$body-bg` main background

Semantic color scheme

	`$theme-color` Semantic theme and quote		`$author-color` Author
	`$place-color` Place entity		`$id-color` ID
	`$organisation-color` Organisation entity		`$date-color` Date
	`$person-color` Person entity		`$type-color` Type
	`$unidentified-color` Unidentified entity

Typography and links

We use a websafe font Arial with a $base-font-size of 16px

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

Set background-color: #fff; on the body
Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base
Set the global link color via $link-color and apply link underlines only on :hover

These styles can be found within node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss.

Access Denied!

It's strictly forbidden to edit the .scss files in node_modules/bootstrap-sass/assets/stylesheets/. DNR specific overrides should be done in /sass/.

Normalize.css

For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Mixing components

WARNING

It's strictly forbidden to mix components on one element

<!-- BAD: -->
<div class="form-group col-md-2 smartinput">...</div>

<!-- GOOD: -->
<div class="col-md-2">
	<div class="form-group">
		<div class="smartinput">...</div>
	</div>
</div>

This way you avoid any code conflicts or unwanted styling overrides.

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

<div class="container">
	...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
	...
</div>

Use .container-limits for content that will be displayed in iframes or modals.

<div class="container-limits">
	...
</div>

This container has a max-width.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Look to the examples for applying these principles to your code.

Media queries

We use the following media queries (custom mixins) in our Sass files to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@include mq-min($screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@include mq-min($screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@include mq-min($screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@include mq-max($screen-xs-max) { ... }
@include mq-min($screen-lg-min) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
	<div class="col-md-8">.col-md-8</div>
	<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
	<div class="col-md-6">.col-md-6</div>
	<div class="col-md-6">.col-md-6</div>
</div>

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

<div class="container-fluid">
	<div class="row">
		...
	</div>
</div>

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
	<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
	<div class="col-xs-6">.col-xs-6</div>
	<div class="col-xs-6">.col-xs-6</div>
</div>

Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
	<!-- Optional: clear the XS cols if their content doesn't match in height -->
	<div class="clearfix visible-xs-block"></div>
	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Example: Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-xs-6
Subsequent columns continue along the new line.

<div class="row">
	<div class="col-xs-9">.col-xs-9</div>
	<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
	<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

<div class="row">
	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

	<!-- Add the extra clearfix for only the required viewport -->
	<div class="clearfix visible-xs-block"></div>

	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

<div class="row">
	<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
	<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
	<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
	<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
	<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

<div class="row">
	<div class="col-xs-6 col-sm-4">
	</div>
	<div class="col-xs-6 col-sm-4">
	</div>
	<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
	</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

<div class="row">
	<div class="col-sm-9">
		Level 1: .col-sm-9
		<div class="row">
			<div class="col-xs-8 col-sm-6">
				Level 2: .col-xs-8 .col-sm-6
			</div>
			<div class="col-xs-4 col-sm-6">
				Level 2: .col-xs-4 .col-sm-6
			</div>
		</div>
	</div>
</div>

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
	<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
	<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Body copy

Bootstrap's global default font-size is 13px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Built with Sass

The typographic scale is based on two Sass variables in _variables.scss: $font-size-base and $line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them in sass/_site-settings.scss and Bootstrap adapts.

Access Denied!

Friendly Reminder: It's strictly forbidden to edit the .scss files in /node_modules/bootstrap-sass/assets/stylesheets/. DNR specific overrides should be done in /sass/.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

Variables

For indicating variables use the <var> tag.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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.

<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<div class="form-group">
		<label for="exampleInputFile">File input</label>
		<input type="file" id="exampleInputFile">
		<p class="help-block">Example block-level help text here.</p>
	</div>

	<div class="checkbox">
		<label>
			<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>

Don't mix form groups with input groups

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Supported controls

Examples of standard form controls supported in an example form layout.

Labels

Be a good lad and make sure every form field has its label.

Don't be a lazy developer

Placeholder text isn't a replacement for labels. So make sure every field has a label and the placeholder is a hint for the expected value in the field.

There are a few components/elements in the design that look like a form label but aren't in a form. To make them look like a label, add the class .faux-control-label to its tag

I look like a label

<div class="faux-control-label">I look like a label</div>

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Type declaration required

Inputs will only be fully styled if their type is properly declared.

<input type="text" class="form-control" placeholder="Text input">

Input groups

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Textarea

Form control which supports multiple lines of text. It has a minimum height through css

<textarea class="form-control" ></textarea>

Checkboxes and radios

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

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

Default (stacked)

<div class="checkbox">
	<label>
		<input type="checkbox" value="">
		Option one is this and that&mdash;be sure to include why it's great
	</label>
</div>
<div class="checkbox disabled">
	<label>
		<input type="checkbox" value="" disabled>
		Option two is disabled
	</label>
</div>

<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		Option one is this and that&mdash;be sure to include why it's great
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
		Option two can be something else and selecting it will deselect option one
	</label>
</div>
<div class="radio disabled">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
		Option three is disabled
	</label>
</div>

Inline checkboxes and radios

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

<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
	<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
	<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
	<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Checkboxes and radios without label text

Should you have no text within the <label>, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

<div class="checkbox">
	<label>
		<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
	</label>
</div>

Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

<select class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

For <select> controls with the multiple attribute, multiple options are shown by default.

<select multiple class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

Some modifier classes for your selects.

Custom dropdown styling with respect to a11y. So we only styled what's possible and didn't interfere with default browser behaviour.

No border ...

Add .form-control-inverted so you can use it on dark backgrounds.

Focus state

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Demo `:focus` state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Disabled state

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled fieldsets

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

Caveat about link functionality of `<a>`

By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

<form>
	<fieldset disabled>
		<div class="form-group">
			<label for="disabledTextInput">Disabled input</label>
			<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
		</div>
		<div class="form-group">
			<label for="disabledSelect">Disabled select menu</label>
			<select id="disabledSelect" class="form-control">
				<option>Disabled select</option>
			</select>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox"> Can't check this
			</label>
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	</fieldset>
</form>

Readonly state

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Help text

Block level help text for form controls.

Messages are used to give the user feedback on why a certain action could not be done. Input field messages more specifically are used for data validation, mainly in forms. They indicate to the user what went wrong while filling in a form or when trying to submit it. It is very important that the user can easily grasp what prevented him/her from continuing his/her work and what he/she can do about it. Therefore, the copywriting of these messages should be short, to the point and straightforward; kindly informing the user

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

The parent form-group needs an extra class has-description when you add a help text

<div class="form-group has-description">
	<label class="control-label" for="inputHelpBlock">Input with help text</label>
	<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
	...
	<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Conveying validation state to assistive technologies and colorblind users

Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute.

<div class="form-group has-success has-description">
	<label class="control-label" for="inputSuccess1">Input with success</label>
	<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
	<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-error has-description">
	<label class="control-label" for="inputError1">Input with error</label>
	<input type="text" class="form-control" id="inputError1" aria-describedby="helpBlock3">
	<span id="helpBlock3" class="help-block">Error description</span>
</div>
<div class="has-success">
	<div class="checkbox">
		<label>
			<input type="checkbox" id="checkboxSuccess" value="option1">
			Checkbox with success
		</label>
	</div>
</div>
<div class="has-error">
	<div class="checkbox">
		<label>
			<input type="checkbox" id="checkboxError" value="option1">
			Checkbox with error
		</label>
	</div>
</div>

Required state

Form elements that are required can be set with the html5 required attribute. This way browsers will identify those fields and have their native form validation active. This is nice in a progressive enhanced perspective but it's ugly as F$CK. So when you have required form fields and want to give nice feedback messages you are allowed to remove the required attribute with JS and display it with the DNR Bootstrap validation states from above

Required input*

With JS enabled and when triggering the feedback message, remove the required attribute and add the code for the validation state.

Required input* Error description

<div class="form-group">
	<label class="control-label" for="inputError2">Required input*</label>
	<input type="text" class="form-control" id="inputError2" required="required" />
</div>

<!-- With JS enabled and when triggering the feedback message, remove the <code>required</code> attribute and add the code for the validation state.-->

<div class="form-group has-error has-description">
	<label class="control-label" for="inputError2">Required input*</label>
	<input type="text" class="form-control" id="inputError2" aria-describedby="helpBlock3">
	<span id="helpBlock3" class="help-block">Error description</span>
</div>

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create taller or shorter form controls that match button sizes.

<input class="form-control input-xlg" type="text" placeholder=".input-xlg">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

<form class="form-horizontal">
	<div class="form-group form-group-lg">
		<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
		</div>
	</div>
	<div class="form-group form-group-sm">
		<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
		</div>
	</div>
</form>

Column sizing

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

<div class="row">
	<div class="col-xs-2">
		<input type="text" class="form-control" placeholder=".col-xs-2">
	</div>
	<div class="col-xs-3">
		<input type="text" class="form-control" placeholder=".col-xs-3">
	</div>
	<div class="col-xs-4">
		<input type="text" class="form-control" placeholder=".col-xs-4">
	</div>
</div>

Button tags

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Options

Use any of the available button classes to quickly create a styled button.

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

<!-- Looks like a regular link but this way it (vertically) aligns with other buttons -->
<button type="button" class="btn btn-link">Link</button>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<p>
	<button type="button" class="btn btn-primary btn-lg">Large button</button>
	<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
	<button type="button" class="btn btn-primary">Default button</button>
	<button type="button" class="btn btn-default">Default button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons have no fancy state when active. Only a solid background color and white text. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

Add the .active class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled or .js-is-disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<!-- with JavaScript -->
<a href="#" class="btn btn-default btn-lg js-is-disabled" role="button">Link</a>

We use .disabled or .js-is-disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

Animated buttons

Animated buttons that provide visual feedback on an action.

They keep the size of the .btn-action-txt when they switch to the state (progress, complete, error) icons.

The .fjs-button-animated class is the one you can use to hook your JS on to make it work. This class is not used in Bootstrap so you can change it to whatever suits you best.

Initial state

In progress: .in-progress or .js-in-progress

Completed: .is-complete or .js-is-complete

Error: .has-error or .js-has-error

<button class="btn btn-default btn-animated fjs-button-animated" type="submit">
	<span class="btn-action-txt">Save</span>
	<span class="btn-spinner">
		<span class="icon icon-spinner"></span>
	</span>
	<span class="btn-response-txt">
		<span class="icon icon-check"></span>
		<span class="icon icon-close"></span>
	</span>
</button>

JavaScript dependency

The error buttons have tooltip attributes and classes on them. You have to insert the required html to the DOM with JavaScript.

<button class="btn btn-primary btn-animated fjs-button-animated js-has-error fjs-danger-tooltip" type="submit" data-placement="top auto" title="We could not save the article. Please try again">
	...
</button>

The attributes and classes you have to add for the tooltip are:

.fjs-danger-tooltip
data-placement="top auto"
title="Your message here"

Deprecated buttons

The following contains a list of deprecated buttons. These classes still exist in our codebase but they @extend some default values.

	Old class	Replaced with
	`.btn-secondary`	`.btn-default`
	`.btn-inverse`	`.btn-default`
	`.btn-tertiary`	`.btn-link`

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Dealing with specificity

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button type="button" class="close" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

<span class="caret"></span>

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
	float: left !important;
}
.pull-right {
	float: right !important;
}

// Usage as mixins
.element {
	@include pull-left;
}
.another-element {
	@include pull-right;
}

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>

// Class
.center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

// Usage as a mixin
.element {
	@include center-block;
}

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
@mixin clearfix {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

// Usage as a mixin
.element {
	@include clearfix;
}

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
	display: block !important;
}
.hidden {
	display: none !important;
}
.invisible {
	visibility: hidden;
}

// Usage as mixins
.element {
	@include show;
}
.another-element {
	@include hidden;
}

Padders

Add spacing to standalone elements. This means you can't add these classes to existing components!

Only use these helpers if it's overkill to create a separate component and when you're 100% sure spacing doesn't change on different resolutions (breakpoints).

<!-- BAD -->
<div class="some-component padder-xx">
	....
</div>

<!-- GOOD -->
<div class="padder-xx">
	<div class="some-component">
		...
	</div>
</div>

Available classes:

.padder-xx: Padding on left and right, amount: $base-spacing-unit (10px)
.padder-x0: Padding on the left
.padder-0x: Padding on the right
.padder-yy: Padding on top and bottom
.padder-y0: Padding on top
.padder-0y: Padding on bottom
.padder-xxyy: Padding all around
.padder-double: Modifier classes that doubles the padding

<div class="padder-x0">10px padding on top</div>
<div class="padder-x0 padder-double">20px padding on top</div>

Overview

HTML5 doctype

Mobile first

Color schemes

Basic color scheme

Semantic color scheme

Typography and links

Access Denied!

Normalize.css

Mixing components

WARNING

Containers

Grid system

Introduction

Media queries

Grid options

Example: Stacked-to-horizontal

Example: Fluid container

Example: Mobile and desktop

Example: Mobile, tablet, desktop

Example: Column wrapping

Responsive column resets

Offsetting columns

Nesting columns

Column ordering

Typography

Body copy

Built with Sass

Access Denied!

Code

Inline

User input

Basic block

Variables

Sample output

Forms

Basic example

Don't mix form groups with input groups

Supported controls

Labels

Don't be a lazy developer

Inputs

Type declaration required

Input groups

Textarea

Checkboxes and radios

Default (stacked)

Inline checkboxes and radios

Checkboxes and radios without label text

Selects

Focus state

Demo :focus state

Disabled state

Disabled fieldsets

Caveat about link functionality of <a>

Cross-browser compatibility

Readonly state

Help text

Associating help text with form controls

Validation states

Conveying validation state to assistive technologies and colorblind users

Required state

Control sizing

Height sizing

Horizontal form group sizes

Column sizing

Buttons

Button tags

Context-specific usage

Links acting as buttons

Cross-browser rendering

Options

Conveying meaning to assistive technologies

Sizes

Active state

Button element

Anchor element

Disabled state

Button element

Demo `:focus` state

Caveat about link functionality of `<a>`