CSS

Getting Started With Bootstrap Foundation Five CSS

Here's the simplest way to get going. The straight CSS version of Foundation includes everything you need to start hacking away, right now! It's a perfect way to kickstart a new prototype or create a finished product with Foundation.

Basic

Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes. Add compatibility classes for each version of the frameworks you want to target. Done.

Bootstrap Foundation Five is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

Rendered HTML

1

11

1

10, offset 1

1

9, offset 2

1

8, offset 3

Incomplete Rows

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.

Rendered HTML

3

3

3

3

3

3 end

Centered Columns

Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.

Rendered HTML

3 centered

6 centered, large

9 centered small

11 centered

Source Ordering

Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.

Row Mixin Options

SCSS

Column Mixin Options

SCSS

.custom-grid-class {
@include grid-column(
// Control the number of columns
$columns:4,
// Specify whethere or not this is the last column in the row
$last-column:true,
// Choose whether or not to center this column
$center:true,
// Choose the number of columns to offset this element by
$offset:3,
// Specify how many columns to push this element past
$push:3,
// Specify how many columns to pull this element past
$pull:9,
// Set to true to remove column padding
$collapse:true,
// Specify the float direction
$float:right
);
}

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import"bootstrapfoundationfive/components/grid";

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Body copy

Bootstrap Foundation Five's global default font-size is 14px, 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).

Built with Less

The typographic scale is based on two Less variables in variables.less: @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 and Bootstrap Foundation Five adapts.

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alternate elements

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Basic abbreviation

For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Auto-truncating

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

Code

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 switch directories, type <kbd>cd</kbd> followed by the name of the directory.

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.

Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

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.

Horizontal form

Use Bootstrap Foundation Five'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.

Disabled fieldsets

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

Link functionality of <a> not impacted

This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

Cross-browser compatibility

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

Validation states

Bootstrap Foundation Five 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.

With optional icons

You can also add optional feedback icons with the addition of an extra class and the right icon.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the topvalue. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Help text

Block level help text for form controls.

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

<spanclass="bootstrap-2-compatible bootstrap-1-compatible foundation-4-compatible foundation-3-compatible foundation-2-compatible foundation-1-compatible help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Buttons

Options

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

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state progammatically.

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.

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

Images

Responsive images

Images in Bootstrap Foundation Five 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

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.

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices
Phones (<768px)

Small devices
Tablets (≥768px)

Medium devices
Desktops (≥992px)

Large devices
Desktops (≥1200px)

.visible-xs

Visible

Hidden

Hidden

Hidden

.visible-sm

Hidden

Visible

Hidden

Hidden

.visible-md

Hidden

Hidden

Visible

Hidden

.visible-lg

Hidden

Hidden

Hidden

Visible

.hidden-xs

Hidden

Visible

Visible

Visible

.hidden-sm

Visible

Hidden

Visible

Visible

.hidden-md

Visible

Visible

Hidden

Visible

.hidden-lg

Visible

Visible

Visible

Hidden

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Class

Browser

Print

.visible-print

Hidden

Visible

.hidden-print

Visible

Hidden

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

Extra small✔ Visible on x-small

Small✔ Visible on small

Medium✔ Visible on medium

Large✔ Visible on large

Extra small and small✔ Visible on x-small and small

Medium and large✔ Visible on medium and large

Extra small and medium✔ Visible on x-small and medium

Small and large✔ Visible on small and large

Extra small and large✔ Visible on x-small and large

Small and medium✔ Visible on small and medium

Hidden on...

Here, green checkmarks also indicate the element is hidden in your current viewport.

Extra small✔ Hidden on x-small

Small✔ Hidden on small

Medium✔ Hidden on medium

Large✔ Hidden on large

Extra small and small✔ Hidden on x-small and small

Medium and large✔ Hidden on medium and large

Extra small and medium✔ Hidden on x-small and medium

Small and large✔ Hidden on small and large

Extra small and large✔ Hidden on x-small and large

Small and medium✔ Hidden on small and medium

Using Less

Bootstrap Foundation Five's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

Compiling Bootstrap Foundation Five

Bootstrap Foundation Five can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, visit the README for how to setup your development environment to run the necessary commands.

Third party compilation tools may work with Bootstrap Foundation Five, but they are not supported by our core team.

Variables

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

Colors

Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

Rounded corners

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap Foundation Five does include shortcuts for quickly rounding two corners on a particular side of an object.

Box (Drop) shadows

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.

The mixin is deprecated as of v3.1.0, since Bootstrap Foundation Five doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap Foundation Five will continue to use the mixin internally until Bootstrap Foundation Five v4.

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

Gradients

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap Foundation Five will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

Using Sass

While Bootstrap Foundation Five is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

What's included

Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap Foundation Five project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

Installation

For information on how to install and use Bootstrap Foundation Five for Sass, consult the GitHub repository readme. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.