615-745-3094 info@workmedia.net

Scaffolding

[h2 class=”title”]Responsive design [small]Media queries for various devices and resolutions[/small][/h2]
[row]
[third_layout]
[h5]What They Do[/h5]

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around [code]min-width[/code] and [code]max-width[/code].

responsive-illustrations

[/third_layout]

[23_layout]

[h5]Supported devices[/h5]

Bootstrap supports a handful of media queries in a single file 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
Smartphones 480px and below Fluid columns, no fixed widths
Smartphones to tablets 767px and below Fluid columns, no fixed widths
Portrait tablets 768px and above 42px 20px
Default 980px and up 60px 20px
Large display 1200px and up 70px 30px

[/23_layout]

[/row]

Default grid system 12 columns with a responsive twist

3
3
3
3
4
4
4
4
8
6
6
12

The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid. It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

[ row ]
  [ third_layout ]...[ /third_layout ]
  [ 23_layout ]...[ /23_layout ]
[ /row ]

As shown here, a basic layout can be created with two “columns,” each spanning a number of the 12 foundational columns we defined as part of our grid system.

Offsetting columns
4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
[ row ]
  [ third_layout ]...[ /third_layout ]
  [ third_layout class="offset4"]...[ /third_layout ]
[ /row ]

 

Nesting columns

To nest your content, just add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of it’s parent. For example, two nested .span3 columns should be placed within a .span6.

Level 1 of column

Level 2
Level 2
[ row ]
  [ full_width ]
    Level 1 of column
    [ inner_row ]
      [ half_width ]Level 2[ /half_width ]
      [ half_width ]Level 2[ /half_width]
    [ /inner_row ]
  [ /full_width ]
[ /row ]

[h2 class=”title”]Responsive utility classes[/h2]

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible