Easy to use : Anybody with just basic knowledge of HTML and CSS can start using Bootstrap 4
Responsive features : Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach : In Bootstrap 4, mobile-first styles are part of the core framework
Browser compatibility : Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Safari, and Opera).
Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness. Bootstrap 4 supports the latest, stable releases of all major browsers and platforms.
Component | Bootstrap 3 | Bootstrap 4 |
---|---|---|
Source CSS Files |
LESS |
SCSS |
Primary CSS Unit |
|
|
Media Queries Unit |
|
|
Global Font Size |
|
|
Default Fonts |
Helvetica Neue, Helvetica, Arial, sans-serif |
Uses a "native font stack" (user's system fonts), with a fallback to Helvetica Neue, Arial, and sans-serif |
Grids | ||
Grid Tiers |
4 tier grid system (xs, sm, md, lg) |
5 tier grid system(xs, sm, md, lg, xl). Bootstrap 4 has removed the |
Offsetting Columns |
Uses |
Uses |
Tables | ||
Inverse Tables |
Not supported. |
Added inverse tables with the |
Table Head Styles |
Not supported. |
Added table head styles with the |
Condensed Tables |
|
|
Contextual Classes |
Bootstrap 3 doesn't use the For example, Bootstrap 3 uses |
Added the |
Responsive Tables |
The |
Can add |
Reflow Tables |
Not supported. |
Reflow tables have now been dropped. |
Forms | ||
Horizontal Forms |
Horizontal forms require the Forms don't require |
Bootstrap 4 dropped the Forms require the |
Use |
Bootstrap 4 uses * Note that Bootstrap 4 initially used |
|
Checkboxes and Radio Buttons |
Uses |
Uses |
Form Control Size |
Use |
Use |
Help Text |
Use the |
Bootstrap 4 uses the
|
Validation and Feedback Icons |
Includes validation styles for error, warning, and success states on form controls (for example, |
Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead. |
Legends |
No classes for styling the form legends. |
Provides the option of using |
Custom Forms |
Not supported. |
Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults. |
Buttons | ||
Styles |
Includes the The |
Introduced the Dropped the Note that the |
Outline Buttons |
Not supported. |
Introduced the
(The |
Button Sizes |
The |
Dropped the |
Images | ||
Responsive Images |
Use |
Use |
Image Alignment |
Use |
Uses Can also use the various Can use the various |
Media Objects | ||
Classes |
Includes many different classes for media objects, including |
Uses just |
Dropdowns | ||
Structure |
Apply dropdowns to lists (i.e. using |
Dropdowns can be built with Apply the |
Menu Headers |
Apply |
Apply |
Dividers |
Apply the |
Apply the |
Disabled Menu Items |
Apply the |
Apply the |
Button Groups | ||
Justified? |
Supports justified button groups (via the |
Not supported. |
Extra Small? |
Supports extra small button groups (via the |
Not supported (dropped the |
Navs | ||
Inline Navs |
There is no |
Can use the |
Navbars | ||
Colors |
Limited (preset) color options. Supports inverse navbars but not the other classes. |
New (preset) color options. Introduced the |
Navbar Alignment |
Use |
Can either use spacing utilities such as |
Navbar Forms |
Add the |
Bootstrap 4 dropped the |
Fixed Navbars |
Uses |
Uses |
Pagination | ||
Default Pagination |
Only requires |
Must also add |
Pagers |
Uses |
Pagers have been dropped in Bootstrap 4 (Alpha 3).
|
Labels | ||
Pill Labels |
The |
Labels have been replaced by badges in Bootstrap 4. Badges can use the |
Tags | ||
Supported? |
No. "Tags" are called "Labels" in Bootstrap 3 (i.e. they use the |
Tags have now been renamed to "badges". These replace labels from Bootstrap 3. |
Jumbotron | ||
Full-Width |
The |
Introduced the |
Progress Bars | ||
Uses progress ?
|
Doesn't use the |
Using the |
Glyphicons | ||
Supported? |
Supported. |
Not supported. |
Typography | ||
Blockquotes |
Bootstrap styles are applied to the |
Introduced the |
Blockquote Alignment |
Use |
Use the text utilities to align blockquotes ( |
Page Headers |
The |
The |
Description Lists |
The |
Horizontal lists are now declared with the |
Non-Responsive Usage | ||
Supported? |
Supported. You can specify a layout to be non-responsive. |
Not supported. |
List Groups | ||
Linked List Items / Button List Items |
Apply |
Apply |
Collapse | ||
Show content |
Uses |
Uses |
Cards | ||
Supported? |
Not supported. |
Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails. |
Panels | ||
Supported? |
Supported. |
Not supported. Use cards instead. |
Wells | ||
Supported? |
Supported. |
Not supported. Use cards instead. |
Thumbnails | ||
Supported? |
Supported. |
Not supported. Use cards instead. |
Breadcrumbs | ||
Classes |
Uses the |
Also requires Breadcrumbs can also be used outside of lists. For example, the |
Carousels | ||
Carousel Item |
Use |
Use |
Affix | ||
Supported? |
Yes. |
No. |