Bootstrap testing

public URL : kiwi.gg/b

Documentation at https://getbootstrap.com/css/#grid.

Features:

Howto:

single column

Action: a .container element with a child .col-12 (variations: a .container-fluid as parent container or a .col-cs-12 child).

Test: OK if :

.container

.row

.col-12 Lorem

.row

.col-xs-12 Lorem
.container-fluid

.row

.col-12 Lorem

.row

.col-xs-12 Lorem
Tests results : single column
Browser Test Comment
Windows Chrome OK -
Windows Firefox OK -
Windows IE10 OK -
Windows IE11 OK -
Windows Edge OK -
Mac Safari OK -
Apple iPhone 5 (iOS 9.x) OK -
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK -

three equal columns

Action: In a .container(-fluid) parent, 3 or 4 children with .col-sm-6 and .col-md-4 classes (variations: adding .col-xs-12.

Test: OK if :

.container

.row

.col-sm-6 col-md-4 Lorem
.col-sm-6 col-md-4 Lorem
.col-sm-6 col-md-4 Lorem

.row

.col-xs-12 col-sm-6 col-md-4 one
.col-xs-12 col-sm-6 col-md-4 two
.col-xs-12 col-sm-6 col-md-4 three
and a picture!
chucky
.container-fluid

.row

.col-sm-6 col-md-4 Lorem
.col-sm-6 col-md-4 Lorem
.col-sm-6 col-md-4 Lorem

.row

.col-xs-12 col-sm-6 col-md-4 one
.col-xs-12 col-sm-6 col-md-4 two
.col-xs-12 col-sm-6 col-md-4 three
and a picture!
chucky
Tests results : three equal columns
Browser Test Comment
Windows Chrome Limited Fails if .row larger than 12, in a way depending of the height of previous column (not necessarily obvious with simple cases)
Windows Firefox Limited Idem
Windows IE10 Limited Idem
Windows IE11 Limited Idem
Windows Edge Limited Idem
Mac Safari Limited Idem
Apple iPhone 5 (iOS 9.x) OK -
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK -

three unequal columns

Action: In a .container(-fluid) parent, 3 children with .col-sm-6 class. 2 of them also have .col-md-3 and 1 of them .col-md-6 class (variation: children with .col-xs-12 class which should stay optional).

Test: OK if :

.container

.row

.col-sm-6 col-md-3 Lorem
.col-sm-6 col-md-6 Lorem
.col-sm-6 col-md-3 Lorem

.row

.col-xs-12 col-sm-6 col-md-3 Lorem
.col-xs-12 col-sm-6 col-md-6 Lorem
.col-xs-12 col-sm-6 col-md-3 Lorem
.container-fluid

.row

.col-sm-6 col-md-3 Lorem
.col-sm-6 col-md-6 Lorem
.col-sm-6 col-md-3 Lorem

.row

.col-xs-12 col-sm-6 col-md-3 Lorem
.col-xs-12 col-sm-6 col-md-6 Lorem
.col-xs-12 col-sm-6 col-md-3 Lorem
Tests results : three unequal columns
Browser Test Comment
Windows Chrome Limited Fails if .row larger than 12, in a way depending of the height of previous column (not necessarily obvious with simple cases)
Windows Firefox Limited Idem
Windows IE10 Limited Idem
Windows IE11 Limited Idem
Windows Edge Limited Idem
Mac Safari Limited Idem
Apple iPhone 5 (iOS 9.x) OK -
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK -

three unequal columns with gutter

Action: In a .container(-fluid) parent, some rows with unequal and equal columns. Then styling background color of the content of .col-**s instead of .col-**s themselves.

Test: OK if :

.container

.row

.col-sm-6 col-md-3 Lorem

.col-sm-6 col-md-6 Lorem

.col-sm-6 col-md-3 Lorem

.row

.col-sm-6 col-md-3 Lorem

.col-sm-6 col-md-9 Lorem

.row

.col-sm-6 col-md-6 Lorem

.col-sm-6 col-md-6 Lorem

.row

.col-xs-12 col-sm-6 col-md-3 Lorem

.col-xs-12 col-sm-6 col-md-6 Lorem

.col-xs-12 col-sm-6 col-md-3 Lorem

.row

.col-xs-12 col-sm-6 col-md-3 Lorem

.col-xs-12 col-sm-6 col-md-9 Lorem

.row

.col-xs-12 col-sm-6 col-md-6 Lorem

.col-xs-12 col-sm-6 col-md-6 Lorem

.container-fluid

.row

.col-sm-6 col-md-3 Lorem

.col-sm-6 col-md-6 Lorem

.col-sm-6 col-md-3 Lorem

.row

.col-sm-6 col-md-3 Lorem

.col-sm-6 col-md-9 Lorem

.row

.col-sm-6 col-md-6 Lorem

.col-sm-6 col-md-6 Lorem

.row

.col-xs-12 col-sm-6 col-md-3 Lorem

.col-xs-12 col-sm-6 col-md-6 Lorem

.col-xs-12 col-sm-6 col-md-3 Lorem

.row

.col-xs-12 col-sm-6 col-md-3 Lorem

.col-xs-12 col-sm-6 col-md-9 Lorem

.row

.col-xs-12 col-sm-6 col-md-6 Lorem

.col-xs-12 col-sm-6 col-md-6 Lorem

Tests results : three unequal columns with gutter
Browser Test Comment
Windows Chrome Not directly - No real gutter, styling a child of .column
- Widths aren't exact because a fixed padding is substracted from any (child of) column
- Expanded rows have half a gutter on their left and right
Windows Firefox Not directly Idem
Windows IE10 Not directly Idem
Windows IE11 Not directly Idem
Windows Edge Not directly Idem
Mac Safari Not directly Idem
Apple iPhone 5 (iOS 9.x) Not directly - No real gutter, styling a child of .column
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK Idem

three columns with offset

Action: Class .col-sm-offset-4 is added to the 4th column to offset it by the width of 4 columns.
Other test case: only 2 children with 1 of them having this same class.

Test: OK if :

.container

.row

.col-sm-4 one

.col-sm-4 two

.col-sm-4 three

.col-sm-4 col-sm-offset-4 push

.col-sm-4 five

.row

row1

row1

row1

.row

.col-sm-4 col-sm-offset-4 push

.col-sm-4 two

.row

.col-sm-4 one

.col-sm-4 col-sm-offset-4 push

.row

.col-xs-12 col-sm-4 one

.col-xs-12 col-sm-4 two

.col-xs-12 col-sm-4 three

.col-xs-12 col-sm-4 col-sm-offset-4 push

.col-xs-12 col-sm-4 five

.row

row1

row1

row1

.row

.col-xs-12 col-sm-4 col-sm-offset-4 push

.col-xs-12 col-sm-4 two

.row

.col-xs-12 col-sm-4 one

.col-xs-12 col-sm-4 col-sm-offset-4 push

.container-fluid

.row

.col-sm-4 one

.col-sm-4 two

.col-sm-4 three

.col-sm-4 col-sm-offset-4 push

.col-sm-4 five

.row

row1

row1

row1

.row

.col-sm-4 col-sm-offset-4 push

.col-sm-4 two

.row

.col-sm-4 one

.col-sm-4 col-sm-offset-4 push

.row

.col-xs-12 col-sm-4 one

.col-xs-12 col-sm-4 two

.col-xs-12 col-sm-4 three

.col-xs-12 col-sm-4 col-sm-offset-4 push

.col-xs-12 col-sm-4 five

.row

row1

row1

row1

.row

.col-xs-12 col-sm-4 col-sm-offset-4 push

.col-xs-12 col-sm-4 two

.row

.col-xs-12 col-sm-4 one

.col-xs-12 col-sm-4 col-sm-offset-4 push

Tests results : three columns with push
Browser Test Comment
Windows Chrome OK -
Windows Firefox OK -
Windows IE10 OK -
Windows IE11 OK -
Windows Edge OK -
Mac Safari OK -
Apple iPhone 5 (iOS 9.x) OK -
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK -

nested grid

Action: In each .row, 5 columns larger than 12 columns. The 4th column contains a (nested) .row with 2 children class="col-sm-6" (also .col-12 or .col-12, for testing purposes).
The total width of the nested columns shouldn't be larger than 12 otherwise the latter will occupy 2 lines or more.

Test: OK if :

.container

.row

.col-sm-4 one

.col-sm-4 two

.col-sm-4 three

.col-sm-6 nested

.col-sm-6 nested

.col-sm-4 five

.row

.col-xs-12 col-sm-4 one

.col-xs-12 col-sm-4 two

.col-xs-12 col-sm-4 three

.col-12 col-sm-6 nested

.col-12 col-sm-6 nested

.col-xs-12 col-sm-4 five

.container-fluid

.row

.col-sm-4 one

.col-sm-4 two

.col-sm-4 three

.col-sm-6 nested

.col-sm-6 nested

.col-sm-4 five

.row

.col-xs-12 col-sm-4 one

.col-xs-12 col-sm-4 two

.col-xs-12 col-sm-4 three

.col-xs-12 col-sm-6 nested

.col-xs-12 col-sm-6 nested

.col-xs-12 col-sm-4 five

Tests results : nested grid
Browser Test Comment
Windows Chrome OK Any nested column needs 4 ancestors (.container, .row and .column of parent column + an extra .row as parent)
Windows Firefox OK Idem
Windows IE10 OK Idem
Windows IE11 OK Idem
Windows Edge OK Idem
Mac Safari OK Idem
Apple iPhone 5 (iOS 9.x) OK Idem
LG Nexus 5 (Android 5.x) ... ...
Motorola Moto G (Android 6.x) OK Idem