{"id":2904,"date":"2018-11-16T14:07:10","date_gmt":"2018-11-16T08:37:10","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=2904"},"modified":"2018-11-16T14:09:50","modified_gmt":"2018-11-16T08:39:50","slug":"differences-between-class-of-bootstrap-3-to-bootstrap-4","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/differences-between-class-of-bootstrap-3-to-bootstrap-4\/","title":{"rendered":"How Class of Bootstrap 4 differ from Bootstrap 3"},"content":{"rendered":"

How Class of Bootstrap 4 differ from Bootstrap 3<\/h2>\n

Date posted:16-11-2018<\/strong><\/h3>\n

Introduction:<\/h3>\n

Basically, many\u00a0\u00a0classes\u00a0 used in Bootstrap 3, not used\u00a0 in Bootstrap 4 and some class used in both the version; But, the new class ruling Bootstrap 4 which is replacing a old component of\u00a0 Bootstrap 3. Like this, here are some more\u00a0differences between class of bootstrap 3 to\u00a0 Bootstrap 4. Bootstrap 4 brought some major changes, adding new component; clashing others. So, in this article, we will discuss on it detail.<\/p>\n

\"\"<\/a><\/p>\n

Migration from Bootstrap 3 to Bootstrap 4:<\/h2>\n

1.Text\/Typography:<\/h3>\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.page-header<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.dl-horizontal<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
<blockquote><\/code><\/td>\n.blockquote<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2.Grid System:<\/h3>\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.col-xs-*<\/code><\/td>\n.col-*<\/code><\/td>\n<\/tr>\n
.col-*-offset-*<\/code><\/td>\noffset-*<\/code><\/td>\n<\/tr>\n
.col-*-push-*<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.col-*-pull-*<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
–<\/td>\n.order-*<\/code>\u00a0ex.\u00a0.order-11<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

3,Buttons<\/h3>\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.btn-default<\/code><\/td>\n.btn-secondary<\/code><\/td>\n<\/tr>\n
.btn-xs<\/code><\/td>\ndropped<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

4.Button group<\/h3>\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.btn-group-justified<\/code><\/td>\nbtn-group.d-flex<\/code><\/td>\n<\/tr>\n
.btn-group-xs<\/code><\/td>\ndropped<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

5.Breadcrumbs<\/h3>\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.breadcrumb > li<\/code><\/td>\n.breadcrumb > li.breadcrumb-item<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

6.Carousel<\/h3>\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.next<\/code><\/td>\n.carousel-item-next<\/code><\/td>\n<\/tr>\n
.prev<\/code><\/td>\n.carousel-item-prev<\/code><\/td>\n<\/tr>\n
.left<\/code><\/td>\n.carousel-item-left<\/code><\/td>\n<\/tr>\n
.right<\/code><\/td>\n.carousel-item-right<\/code><\/td>\n<\/tr>\n
.carousel-control.right<\/code><\/td>\n.carousel-control-right<\/code><\/td>\n<\/tr>\n
.carousel-control.left<\/code><\/td>\n.carousel-control-left<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

7.Dropdowns<\/h3>\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.divider<\/code><\/td>\n.dropdown-divider<\/code><\/td>\n<\/tr>\n
<span class=\"caret\"><\/span><\/code><\/td>\ndropped<\/code><\/td>\n<\/tr>\n
–<\/td>\nDropdown items now require\u00a0.dropdown-item<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

8.Forms<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.radio-inline<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.checkbox-inline<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.form-horizontal<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.control-label<\/code><\/td>\n.col-form-label<\/code><\/td>\n<\/tr>\n
.input-lg<\/code><\/td>\n.form-control-lg<\/code><\/td>\n<\/tr>\n
.input-sm<\/code><\/td>\n.form-control-sm<\/code><\/td>\n<\/tr>\n
.form-group-*<\/code><\/td>\n.form-control-*<\/code><\/td>\n<\/tr>\n
.help-block<\/code><\/td>\n.form-text.text-muted<\/code><\/td>\n<\/tr>\n
.has-error<\/code>,\u00a0.has-warning<\/code><\/td>\n:invalid<\/code><\/td>\n<\/tr>\n
.has-success<\/code><\/td>\n:valid<\/code><\/td>\n<\/tr>\n
.has-error<\/code><\/td>\n.has-danger<\/code><\/td>\n<\/tr>\n
.radio<\/code><\/td>\n.form-check<\/code><\/td>\n<\/tr>\n
.checkbox<\/code><\/td>\n.form-check<\/code><\/td>\n<\/tr>\n
.form-control-static<\/code><\/td>\n.form-control-plaintext<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

9.Helper classes<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.center-block<\/code><\/td>\nmx-auto<\/code><\/td>\n<\/tr>\n
.pull-left<\/code><\/td>\nfloat-left<\/code><\/td>\n<\/tr>\n
.pull-right<\/code><\/td>\nfloat-right<\/code><\/td>\n<\/tr>\n
.visible-xs-*<\/code><\/td>\n.d-block.d-sm-none<\/code><\/td>\n<\/tr>\n
.visible-sm-*<\/code><\/td>\n.d-block.d-md-none<\/code><\/td>\n<\/tr>\n
.visible-md-*<\/code><\/td>\n.d-block.d-lg-none<\/code><\/td>\n<\/tr>\n
.visible-lg-*<\/code><\/td>\n.d-block.d-xl-none<\/code><\/td>\n<\/tr>\n
.hidden-xs-up<\/code><\/td>\n.d-none<\/code><\/td>\n<\/tr>\n
.hidden-sm-up<\/code><\/td>\n.d-sm-none<\/code><\/td>\n<\/tr>\n
.hidden-md-up<\/code><\/td>\n.d-md-none<\/code><\/td>\n<\/tr>\n
.hidden-lg-up<\/code><\/td>\n.d-lg-none<\/code><\/td>\n<\/tr>\n
.hidden-xl-up<\/code><\/td>\n.d-xl-none<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

10.Images<\/h3>\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.img-responsive<\/code><\/td>\n.img-fluid<\/code><\/td>\n<\/tr>\n
.img-rounded<\/code><\/td>\n.rounded<\/code><\/td>\n<\/tr>\n
.img-circle<\/code><\/td>\n.rounded-circle<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

11.Input groups<\/h3>\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.input-group-addon<\/code><\/td>\n.input-group-prepend<\/code>,\u00a0.input-group-append<\/code><\/td>\n<\/tr>\n
.input-group-btn<\/code><\/td>\n.input-group-prepend<\/code>,\u00a0.input-group-append<\/code><\/td>\n<\/tr>\n
–<\/td>\n.input-group-text<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

12.Labels & Badges<\/h3>\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.label<\/code><\/td>\n.badge<\/code><\/td>\n<\/tr>\n
.badge<\/code><\/td>\n.badge.badge-pill<\/code><\/td>\n<\/tr>\n
.badge-default<\/code><\/td>\n.badge-secondary<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

13.Navbar<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
–<\/td>\n.navbar-expand-{breakpoint}<\/code><\/td>\n<\/tr>\n
.navbar-default<\/code><\/td>\n.navbar-light<\/code><\/td>\n<\/tr>\n
.navbar-toggle<\/code><\/td>\n.navbar-toggler<\/code><\/td>\n<\/tr>\n
.navbar-form<\/code><\/td>\n.form-inline<\/code><\/td>\n<\/tr>\n
.navbar-btn<\/code><\/td>\n.nav-item<\/code><\/td>\n<\/tr>\n
.navbar-right<\/code><\/td>\n.ml-auto<\/code><\/td>\n<\/tr>\n
.navbar-left<\/code><\/td>\n.mr-auto<\/code><\/td>\n<\/tr>\n
.navbar-fixed-top<\/code><\/td>\n.fixed-top<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

14.Navs<\/h3>\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.nav > li<\/code><\/td>\n.nav > li.nav-item<\/code><\/td>\n<\/tr>\n
.nav > li > a<\/code><\/td>\n.nav > li.nav-item > a.nav-link<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

15.Pagination<\/h3>\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.pagination > li<\/code><\/td>\n.pagination > li.page-item<\/code><\/td>\n<\/tr>\n
.pagination > li > a<\/code><\/td>\n.pagination > li.page-item > a.page-link<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

16.Panels<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.panel<\/code><\/td>\n.card<\/code><\/td>\n<\/tr>\n
.panel-default<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.panel-group<\/code><\/td>\n.card-group<\/code><\/td>\n<\/tr>\n
.panel-heading<\/code><\/td>\n.card-header<\/code><\/td>\n<\/tr>\n
.panel-title<\/code><\/td>\n.card-title<\/code><\/td>\n<\/tr>\n
.panel-body<\/code><\/td>\n.card-body<\/code><\/td>\n<\/tr>\n
.panel-footer<\/code><\/td>\n.card-footer<\/code><\/td>\n<\/tr>\n
.panel-primary<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.panel-success<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.panel-info<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.panel-warning<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.panel-danger<\/code><\/td>\ndropped<\/td>\n<\/tr>\n
.panel-footer<\/code><\/td>\n.card-footer<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

17.Progress<\/h3>\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.progress-bar-*<\/code><\/td>\n.bg-<\/code><\/td>\n<\/tr>\n
.active<\/code><\/td>\n.progress-bar-animated<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

18.Tables<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 3<\/th>\nBootstrap 4<\/th>\n<\/tr>\n<\/thead>\n
.table-condensed<\/code><\/td>\n.table-sm<\/code><\/td>\n<\/tr>\n
.active<\/code><\/td>\n.table-active<\/code><\/td>\n<\/tr>\n
.success<\/code><\/td>\n.table-success<\/code><\/td>\n<\/tr>\n
.info<\/code><\/td>\n.table-info<\/code><\/td>\n<\/tr>\n
.warning<\/code><\/td>\n.table-warning<\/code><\/td>\n<\/tr>\n
.danger<\/code><\/td>\n.table-danger<\/code><\/td>\n<\/tr>\n
New classes<\/strong><\/td>\n<\/td>\n<\/tr>\n
–<\/td>\n.table-inverse<\/code><\/td>\n<\/tr>\n
–<\/td>\n.thead-default<\/code><\/td>\n<\/tr>\n
–<\/td>\n.thead-inverse<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The most notable changes are summarized above.\u00a0Bootstrap 4 created a major changes in web development which overcomes the usage of bootstrap 3. Bootstrap 4 emerges in all new sites,easily modifiable and reliable. Use the enhanced class of BS4 and adapt to its goodness.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

How Class of Bootstrap 4 differ from Bootstrap 3 Date posted:16-11-2018 Introduction: Basically, many\u00a0\u00a0classes\u00a0 used in Bootstrap 3, not used\u00a0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[478,479,480,485,483],"class_list":["post-2904","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-bootstrap-3","tag-bootstrap-4","tag-class","tag-html-css","tag-web-development","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-KQ","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=2904"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2904\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=2904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=2904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=2904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}