Bootstrap 5 vs Bootstrap 3
(compare is only in english available)
There are many changes between bootstrap 5 and 3. The most important changes for K8 Web Kit are listed here.
| Subject | Bootstap 5 | Bootstap 3 |
|---|---|---|
| General | ||
| Font size px | 14 | 12 |
| Container size px | 1320 | 1170 |
| Navigation | a class | |
| li class | nav-item | |
| a class | nav-link | |
| Layout | flexbox | flex |
| column, nearly same | col-sm-1 | col-sm-1 |
| very small | col-1 | col-xs-1 |
| margin | mt-1,-2,.. mt-,mx-,my-,mb- | |
| padding | pt-1,-2,.. pt-,px-,py-,pb- | |
| alignement, text- | start, center, end | left, center, right |
| Image | img-fluid | img-responsive |
| center | mx-auto d-block | center-block |
| Form | ||
| form class | - | form-horizontal, form-vertical |
| input height | 24 | 20 |
| form-control height | 38 | 34 |
| vertical wrap class | mb-3 | |
| vertical label class | col-form-label | control-label |
| horizontal wrap class | mb-3 row | form-group |
| horizontal label class | form-label | control-label |
| horizontal input wrap class | col-sm-9 | controls col-sm-9 |
| input class | form-control | control |
| select class | form-select | form-control |
| hint class | form-text | |
| Symbol | icons | glyphicon |
| Pagination | ||
| li class | page-item | |
| a class | page-link | |
| disabled | aria-disabled="true" | |
| Dropdown | ||
| unfold direction | automatic | |
| button | data-bs-toggle="dropdown" aria-expanded="false" | data-toggle="dropdown" aria-haspopup="true" |
| a class | dropdown-item |
More details are here at techaltum