Scaffolding

Live fluid grid example

The WVA styleguide is built on Bootstraps 12 column fluid grid. The grid system uses percents instead of pixels for column widths and will adapt to be 1170px, 940px or 724px wide depending on the size of the viewport. Below 767px viewports, the columns become fluid and stack vertically for a 'mobile' view.

Basic fluid grid HTML

For a simple two column layout, create a .row-fluid and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

Offsetting columns

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Nesting columns

To nest your content, add a new .row-fluid and set of .span* columns within an existing .span* column. Each level of nested columns adds up to 100% of the parent column. This means nested columns should always add up to 12 columns regardless of the parent column.

Fluid 12

Fluid 6

Fluid 9

Fluid 6

Fluid 3

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">Fluid 6</div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>
<div class="row-fluid">
  <div class="span9">
    Fluid 9
    <div class="row-fluid">
      <div class="span6">Fluid 6</div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
 <div class="span3">
  Fluid 3
 </div>
</div>

Mobile columns

As stated above, when in mobile view (<768px), all columns will collapse underneath each other by default. However, mobile view also features a 4 column grid you can use on any item by adding the class mobile-span* where the asterix is a number between 1 and 3 (Remembering that mobile-span4 would be 100% which is already the default).

Offsetting of columns for mobile works in a similar fashion, by adding a mobile-offset* class (between 1 and 3).

Heads up! Due to width constraints, nesting mobile columns should be avoided.

In the example below you can see mobile columns in action. The first row has 4 columns, which is span3 on desktop and span1 on mobile (hence "3/1" in the box).

You may have a situation where on desktop you have a row that has four columns, but on mobile you want to break the row and display it as 2 rows of 2 columns. You can do with using the class break-row on the element you want to wrap to a new row. The second and 3rd rows of the example display this.

3/1

3/2

9 Offset3/ 3 Offset1

12/4

<div class="row-fluid">
  <div class="span3 mobile-span1">3/1</div>
  <div class="span3 mobile-span1">3/1</div>
  <div class="span3 mobile-span1">3/1</div>
  <div class="span3 mobile-span1">3/1</div>
</div>
<div class="row-fluid">
  <div class="span3 mobile-span2">3/2</div>
  <div class="span3 mobile-span2">3/2</div>
  <div class="span3 mobile-span2 break-row">3/2</div>
  <div class="span3 mobile-span2">3/2</div>
</div>
<div class="row-fluid">
  <div class="span9 offset3 mobile-span3 mobile-offset1">9 Offset3/ 3 Offset1</div>
</div>
<div class="row-fluid">
  <div class="span12">12/4</div>
</div>

Fixed layout

Provides a common fixed-width responsive layout with only <div class="container"> required.

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

Fluid layout

Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Supported devices

WVA Bootstrap includes a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label	Layout width	Column width	Gutter width
Large display	1200px and up	70px	30px
Default	980px and up	60px	20px
Portrait tablets	768px and above	42px	20px
Phones to tablets	767px and below	Fluid columns, no fixed widths
Phones	480px and below	Fluid columns, no fixed widths

You may add your own custom project specific media queries using the following media queries:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

Responsive utilities test case

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

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

Phone✔ Phone
Tablet✔ Tablet
Desktop✔ Desktop

Hidden on...

Here, green checkmarks indicate that class is hidden in your current viewport.

Phone✔ Phone
Tablet✔ Tablet
Desktop✔ Desktop

Fluid grid system