InfoNet
Level 6 - Page 5
Classes : lots
Hello World!
Resize the browser window to see the effect.
.col-sm-4
.col-sm-4
.col-sm-4
Hello World!
Resize the browser window to see the effect.
.col-sm-3
.col-sm-6
.col-sm-3
Hello World!
Resize the browser window to see the effect.
.col-sm-4
.col-sm-8
Hello World!
Resize the browser window to see the effect.
.col-sm-8
.col-sm-6
.col-sm-6
.col-sm-4
Hello World!
Resize the browser window to see the effect.
.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
.col-xs-6 .col-md-10
.col-xs-6 .col-md-2
.col-xs-6
.col-xs-6
Hello World!
Resize the browser window to see the effect.
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
.col-xs-6 .col-sm-8 .col-lg-10
.col-xs-6 .col-sm-4 .col-lg-2
.col-xs-6
.col-xs-6
Hello World!
Column 1
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
Column 2
Column 3
Column 4
Offsetting Columns
Resize the browser window to see the effect.
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
Push and Pull
Resize the browser window to see the effect.
.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4