The main advantages of the boxes over regular divs:
Boxes can be represented by several core classes:
.box
- basic container, which is an element with display: table
..box-constainer
- sub-container, which is an element with display: table
. Use it when you want add extra structure in a cell..box-row
- box row, which is an element with display: table-row
..box-cell
- box cell, which is an element with display: table-cell
.To see how it works, look at the examples below.
Box rows must contain equal number of cells.
If you want add extra structure to a box, you need to use a .box-container
element.
The first row contains 1 cell, the second row contains 3 cells:
The first row contains 2 cells, the second row contains 4 cells:
The first cell contains 1 row, the second cell contains 3 rows:
The first cell contains 2 rows, the second cell contains 4 rows:
Use utility classes to align content inside a box cell.
When you're using icons in box cells, add the .box-icon
class to an icon element.
.box-icon
class
.box-icon
class
You can add background icon to a box cell. Change the icon position by adding
the .left
, .right
, .top
, .middle
and .bottom
classes.
Use the regular Bootstrap's responsive classes with box cells.
First-level cells will be stacked on screen sizes up to large, second-level cells will be stacked on screen sizes up to small: