Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image

Grid System

  2. Advance components
  3. Grid System
Grid

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

.col-sm-12
.col-sm-6
.col-sm-6
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
Mobile and Desktop

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

.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
Column wrapping

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
Responsive column resets

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
Variables

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

$grid-columns:12;
$grid-gutter-width-base: 30px;
$grid-gutter-widths: (
xs: $grid-gutter-width-base, // 30px
sm: $grid-gutter-width-base, // 30px
md: $grid-gutter-width-base, // 30px
lg: $grid-gutter-width-base, // 30px
xl: $grid-gutter-width-base // 30px
)
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);