Bootstrap 4 has some new components, faster stylesheet, more buttons, effects and more responsiveness.
Bootstrap 4 supports some the latest, stable releases of all major browsers and platforms.
Here's the difference between Bootstrap 3 and Bootstrap 4.
| Component | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| Global | ||
| Source CSS Files |
LESS
|
SCSS
|
| Primary CSS Unit | px | rem |
| Media Queries Unit | px | px |
| Global Font Size | 14px | 16px |
| 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).
|
| Offsetting Columns |
Uses
col-*-offset-* classes to offset columns. For example, col-md-offset-4. |
Uses
offset-*-* classes to offset columns. For example, offset-md-4. |
| Tables | ||
| Dark/inverse Tables |
Not supported.
|
Added dark/inverse tables with the
.table-dark class.
Note: Prior to the Beta 2 release, these required the
.table-inverse class. This class has been replaced with .table-dark in Beta 2. |
| Table Head Styles |
Not supported.
|
Added table head styles with the
.thead-light and .thead-darkclasses.
Note: Prior to the Beta 2 release, these required the
.table-default class and the .table-dark class. These classes have been replaced with .table-lightand .table-dark in Beta 2. |
| Condensed Tables | .table-condensed | .table-sm |
| Contextual Classes |
Bootstrap 3 doesn't use the
.table- prefix for its contextual classes.
For example, Bootstrap 3 uses
.active whereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger). |
Added the
.table- prefix for its contextual classes. |
| Responsive Tables |
The
.table-responsive class must be added to a parent divelement. |
The
.table-responsive class must be added to a parent divelement..table-responsive to the actual table element.
Beta 2 has also introduced the
.table-responsive-* classes that can be used to specify a particular breakpoint. These are .table-responsive-sm, .table-responsive-md, .table-responsive-lg, and .table-responsive-xl. |
| Reflow Tables |
Not supported.
| .table-reflow class.
Reflow tables have now been dropped.
|
| Forms | ||
| Horizontal Forms |
Horizontal forms require the
.form-horizontal class.
Forms don't require
.row when using grids (although this class is still a requirement on Bootstrap 3 grids in general). |
Bootstrap 4 dropped the
.form-horizontal class — it is no longer needed to display horizontal forms.
Forms require either the
.rowclass when using grids, or the .form-row class (introduced in Bootstrap 4), which makes the form more compact. |
Use
.control-label when using grids for form layout. |
Bootstrap 4 uses
.col-form-label * when using grids for form layout.
* Note that Bootstrap 4 initially used
.form-control-label but subesquently changed this to .col-form-label. | |
| Checkboxes and Radio Buttons |
Uses
.radio, .radio-inline, .checkbox, or .checkbox-inlineto display checkboxes and radio buttons. |
Uses
.form-check, .form-check-label, .form-check-input, and .form-check-inline. |
| Form Control Size |
Use
.input-lg and .input-sm to increase or decrease the size of an input control. |
Use
.form-control-lg and .form-control-sm to increase or decrease the size of an input control. |
| Form Label Size |
No specific classes for adjusting form label size.
|
Bootstrap 4 introduced
.col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label to match the size of the relevant form control. |
| Help Text |
Use the
.help-block class to display help text. |
Bootstrap 4 uses the
.form-textclass to display help text. |
| Validation and Feedback Icons |
Includes validation styles for error, warning, and success states on form controls (for example,
.has-warning). To present icons on the input fields using Bootstrap 3, use glyphicons. |
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
.col-form-label on legendelements to style it more like a label. |
| Static text |
Uses
.form-control-static to render static text instead of a control. |
In Bootstrap 4,
.form-control-static has been renamed to .form-control-plaintext. |
| Custom Forms |
Not supported.
|
Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.
|
| Buttons | ||
| Styles |
Includes the
.btn-default and .btn-info classes.
The
.btn-secondary class isn't available in Bootstrap 3. |
Introduced the
.btn-secondary, .btn-light, and .btn-darkclasses.
Dropped the
.btn-default class.
Note that the
.btn-info class was initially dropped in Bootstrap 4 but then reappeared again. |
| Outline Buttons |
Not supported.
|
Introduced the
.btn-outline-*classes for styling buttons with an outline color..btn-*-outlineclasses for styling buttons with an outline color.
(The
.btn-*-outline classes became .btn-outline-* in Alpha 3). |
| Button Sizes |
The
.btn-xs class is available. |
Dropped the
.btn-xs class (only .btn-sm and .btn-lg are available now). |
| Input groups | ||
| Classes |
Bootstrap 3 uses the
.input-group-addon and .input-group-btn classes. |
Bootstrap 4 dropped
.input-group-addon and .input-group-btn for two new classes: .input-group-prepend and .input-group-append.
Bootstrap 4 also introduced
.input-group-text for text within an input group. |
| Images | ||
| Responsive Images |
Use
.img-responsive class. |
Use
.img-fluid class. |
| Image Alignment |
Use
.pull-right, .pull-left, and .center-block helper classes. |
Uses
.m-x-auto instead of .center-block to align block-level images.
Can also use the various
.pull-*-right and .pull-*-leftresponsive helper classes, as well as the .text-*-left, .text-*-center, and .text-*-righthelper classes on the image's parent.
Can use the various
.pull-*-none classes to disable floating. |
| Media Objects | ||
| Classes |
Includes many different classes for media objects, including
.media, .media-body .media-object, .media-heading, .media-right, .media-left, and .media-list and .media-body. |
Uses just
.media class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc). |
| Dropdowns | ||
| Structure |
Apply dropdowns to lists (i.e. using
ul and li). |
Dropdowns can be built with
ul or divs.
Apply the
.dropdown-item to a a or button element and wrap them all in a div (or ul) with a .dropdown-menuclass applied. |
| Menu Headers |
Apply
.dropdown-header to the li tag. |
Apply
.dropdown-header to h1- h2 tags (as Bootstrap no longer uses li tags to build dropdowns). |
| Dividers |
Apply the
.divider class to the li element (because it used lists to build dropdowns). |
Apply the
.dropdown-divider to the div element. |
| Disabled Menu Items |
Apply the
.disabled class to the li element. |
Apply the
.disabled class to the a element. |
| Button Groups | ||
| Justified? |
Supports justified button groups (via the
.btn-group-justifiedclass). |
Not supported.
|
| Extra Small? |
Supports extra small button groups (via the
.btn-group-xsclass). |
Not supported (dropped the
.btn-group-xs class). |
| Navs | ||
| Inline Navs |
There is no
.nav-inline class. |
Can use the
.nav-inline class to explicitly specify navs to be displayed inline. |
| Navbars | ||
| Colors |
Limited (preset) color options. Supports inverse navbars but not the other classes.
|
New (preset) color options. Introduced the
.navbar-lightand the .navbar-dark classes, and allows the .bg-* classes to be used on navbars. |
| Navbar Alignment |
Use
.navbar-right, .navbar-left to align components within the navbar. | .pull-*-rightand .pull-*-left responsive helper classes..pull-*-none classes to disable floating.
Can either use spacing utilities such as
.mr-auto, or any of the flexbox alignment utilities. |
| Navbar Forms |
Add the
.navbar-form class to forms within navbars. |
Bootstrap 4 dropped the
.navbar-form class. It's no longer necessary. |
| Fixed Navbars |
Uses
.navbar-fixed-top and .navbar-fixed-bottom to fix navbars to the top or bottom. |
Uses
.fixed-top and .fixed-bottom. |
| Pagination | ||
| Default Pagination |
Only requires
.pagination to be added (to the ul element that represents the list of pages). |
Must also add
.page-item to each li element and .page-link to each a element. |
| Pagers |
Uses
.previous and .next for aligning pagers. |
Pagers have been dropped in Bootstrap 4 (Alpha 3).
.pager-prev and .pager-next for aligning pagers. |
| Labels | ||
| Pill Labels |
The
.label-pill class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect). |
Labels have been replaced by badges in Bootstrap 4.
Badges can use the
.badge-pillfor rounded corners. |
| Tags | ||
| Supported? |
No.
"Tags" are called "Labels" in Bootstrap 3 (i.e. they use the
.label class). | .tag class was introduced in Bootstrap 4 (Alpha 3) to replace the .label class.label element.
Tags have now been renamed to "badges". These replace labels from Bootstrap 3.
|
| Jumbotron | ||
| Full-Width |
The
.jumbotron-fluid class is not required on full-width jumbotrons. |
Introduced the
.jumbotron-fluidclass for full-width jumbotrons. |
| Progress Bars | ||
Uses progress? |
Doesn't use the
progress for progress bars. Instead, applies progress bar classes to nested div elements. | progresselement when working with progress bars.
Using the
progress element was abandoned in Alpha 6. Bootstrap 4 now uses the divelement again. |
| Glyphicons | ||
| Supported? |
Supported.
|
Not supported.
|
| Typography | ||
| Blockquotes |
Bootstrap styles are applied to the
blockquote element by default. |
Introduced the
.blockquote class for styling the blockquoteelement (i.e. styling this element is now opt-in). |
| Blockquote Alignment |
Use
.blockquote-reverse to align a blockquote to the right. |
Use the text utilities to align blockquotes (
.text-center and .text-right). |
| Page Headers |
The
.page-header class is supported. |
The
.page-header class is not supported. |
| Description Lists |
The
.dl-horizontal class was used to declare a horizontal list. |
Horizontal lists are now declared with the
.row class on the dltag, then any of the grid system's predefined classes to the dtand dd tags. |
| 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
.list-group-item to the a element. |
Apply
.list-group-item-actionto the a element. |
| Collapse | ||
| Show content |
Uses
.in to have content expanded upon page load. |
Uses
.show to have content expanded upon page load. |
| 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
.breadcrumb class against the ul tag. |
Also requires
.breadcrumb-itemto be applied against all lielements that make up the breadcrumb.
Breadcrumbs can also be used outside of lists. For example, the
.breadcrumb-item could be applied to a bunch of aelements that are wrapped in a .breadcrumb element. |
| Carousels | ||
| Carousel Item |
Use
.item class. |
Use
.carousel-item class. |
| Affix | ||
| Supported? |
Yes.
|
No.
|
0 comments:
Post a Comment