Grid

Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.

• Default gutter width: 15px either side.
• Large container width: 1170px.
• Desktop container width: 970px.
• Tablet container width: 770px.

• The parent container is .us-container, you must have this to start building the uSwitch layouts.
• .us-grid-row is then used when you are building rows of columns (gives a negative margin to the container so they align correctly).
• All grid class names are prefixed with .us-col-.

Example

Here is an example of a grid which will turn into 100% width columns on mobile.

<div class="us-grid-row">
  <div class="us-col-md-2">.us-col-md-2</div>
  <div class="us-col-md-2">.us-col-md-2</div>
  <div class="us-col-md-4">.us-col-md-4</div>
  <div class="us-col-md-4">.us-col-md-4</div>
</div>
<div class="us-grid-row">
  <div class="us-col-md-8">.us-col-md-8</div>
  <div class="us-col-md-4">.us-col-md-4</div>
</div>
<div class="us-grid-row">
  <div class="us-col-md-6">.us-col-md-6</div>
  <div class="us-col-md-6">.us-col-md-6</div>
</div>
  

Example with mobile columns