flati | responsive html5 template | themeforest | josweb

# Style

# Scaffolding

# Bootstrap is built on responsive 12-column grids, layouts, and components.

### BuiltWith Bootstrap

Bootstrap is made to not only look and behave great in the latest desktop browsers, but in tablet and smartphone browsers too. It's packed with features; a 12-column responsive grid, dozens of components, plugins and more!.

##### Supported Devices

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

### Default grid system 12 columns with a responsive twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The default grid system is a 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.

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

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

### Offsetting Columns

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4

    <div class="row">
      <div class="span4">...</div>
      <div class="span4 offset4">...</div>
    </div>

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

    <div class="row">
      <div class="span12">
        Level 1 of column
        <div class="row">
          <div class="span6">Level 2</div>
          <div class="span6">Level 2</div>
        </div>
      </div>
    </div>

### Responsive Utility Classes

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

FLATI ©
- All Rights Reserved : Template by Spiral Pixel