3

Grids

Left Midle Right
  1. Home
  2. Library
  3. Data

Stacked-to-horizontal

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Mobile and desktop

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mobile, tablet, desktops

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Responsive column resets

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

reset offsets, pushes, or pulls

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

Offsetting columns

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Nesting columns

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6

Column ordering

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

Chats

Top contacts

Iin Bent Team Leader

Mr. Doe UI Designer

Yu Darsih Data Analyst
More contacts

Mba Jessica PHP Programmer

Doel Jony Rubi Programmer

Yumiko Java Programmer

Mark Londrian PHP Programmer

Mahatma PHP Programmer

Harab Junior Designer

Sungep Acountant

Pathoel Acountant

Opytama Data Analyst

Mr. Doe

In eget pellentesque vehicula, quam aliquet turpis convallis

lorem nibh nam suspendisse lacinia

massa cursus auctor urna parturient

paperclips.zip

Great!

Pulvinar aute massa amet dapibus, etiam consectetuer consectetuer sagittis, egestas massa nibh vestibulum, sapien in sodales, quisque nec habitasse phasellus ultricies tempus

Mr. Doe is typing...