| Grid System | 4 tier grid system (xs, sm, md, lg). | 5 tier grid system (xs, sm, md, lg, xl). |
|---|
| CSS File | LESS | SASS |
|---|
| Button Size | Bootstrap 3 supports .btn-xs class. | Only .btn-sm and .btn-lg are available in bootstrap 4. |
|---|
| Horizontal Form | We do not need a .row class using a grid in forms. | .row class is needed when using the grid in form. |
|---|
| Inverse/dark Table | .table-inverse class is not supported. | .table-inverse class is supported. |
|---|
| Primary Unit | Primary unit is px. | Primary unit is rem |
|---|
| Table Head Styles | Table head styles are not supported. | In bootstrap 4, table head styles with the .thead-light and .thead-dark classes. |
|---|
| Condensed Tables | It supports .table-condensed. | It supports .table-sm. |
|---|
| Responsive Image | .img-responsive class is to be used. | .img-fluid class is to be used. |
|---|
| Image Alignment | Use the .pull-right and .pull-left class. | One can use .pull-right, .pull-left and other such classes like .text-left and .text-center. |
|---|
| Structure | In order to apply dropdown list, we use <ul>, <li> | In order to apply .dropdown-item, we use <a>, <button>. |
|---|
| Color | Limited colors are available; it supports inverse navbars but not other classes. | There are many colors; .bg-dass or .navbar-light, .navbar-dark classes are supported. |
|---|
| Jumbotron | .jumbotron-fluid class is not required for full-width. | .jumbotron-fluid class is required for a full-width jumbotron. |
|---|
| Show content | .in is used to expand content when the page loads. | .show is used to expand content when the page loads. |
|---|
| Glyphicons | Supported. | Not supported. |
|---|
| Breadcrumb class | .breadcrumb class is used against the <ul> tag. | .breadcrumb class is used against the <li> tag. |
|---|
| Affix | Supported. | Not supported. |
|---|
| Flexbox | Not supported. | Supported. |
|---|
| Carousel Item | It uses the .item class. | It uses the .carousel-item class. |
|---|
| Dividers | .divider class is applied to <li> element. | .dropdown-divider class is applied to <div> element. |
|---|
| Panels, Wells and Thumbnails | Supported. | Not supported. Cards are used instead |
|---|
Leave a Reply