A differenza del predecessore, in B3 l'orientamento è verso il mobile first*. Significa che l'aspetto responsivo ( visuale e a livello di prestazioni ) non è un opzione ma la base del framework. In pratica, la griglia offre un esteso margine di personalizzazione a seconda che il device sia extra small, grazie all'utilizzo delle classi specifiche seguite dalla dimensione ( col-xs- ), small ( col-sm- ), medium (col-md), large ( col-lg- ).
| | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints |
|---|
| Container width | None (auto) | 750px | 970px | 1170px |
|---|
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
|---|
| # of columns | 12 |
|---|
| Column width | Auto | ~62px | ~81px | ~97px |
|---|
| Gutter width | 30px (15px on each side of a column) |
|---|
| Nestable | Yes |
|---|
| Offsets | Yes |
|---|
| Column ordering | Yes |
|---|
