Wednesday 3 August 2016

Boostrap - .col-xm, .col-sm, .col-md, .col-lg, .col-xl Property and screen resultion

.col-xs extreme small size - mobile size <=544px
.col-sm Small size - Smartphone sise >=768px
.col-md Medium size- Avg Desktop size >=992px
.col-lg Large size - Bigger Desktop screen resolution >=1200px
.col-xl Extra Large size - Largest (TV) Screen >=1280px

<class=".col-xm-12" > is usual screen width implementation. 


Extra small
<544px
Small
≥544px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)576px720px940px1140px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width1.875rem / 30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

No comments:

Post a Comment