bootstrap 4 replaced elements

[Jimmi08]

Replacement for bootstrap 4:

Buttons:
.btn-default : .btn-secondary (started)

Dropdowns:
.divider : .dropdown-divider
Dropdown items now require .dropdown-item

Carousel:

.next	: .carousel-item-next
.prev	: .carousel-item-prev
.left	: .carousel-item-left
.right	: .carousel-item-right
.carousel-control.right	: .carousel-control-right
.carousel-control.left	: .carousel-control-left

Forms:

.control-label	: .form-control-label
.input-lg	: .form-control-lg
.input-sm	: .form-control-sm
.form-group-*	: .form-control-*
.help-block	: .form-text
.row	: .form-row
.has-error	: .has-danger
.form-control-static	: .form-control-plaintext

Grid system:

.col-{breakpoint}-{modifier}-{size}
ex. .col-md-push-9	: .push-md-9

Images: (Complete?)

.img-responsive	: .img-fluid 
.img-rounded :	.rounded 
.img-circle	: .rounded-circle

Navs::

.nav > li	: .nav > li.nav-item
.nav > li > a	: .nav > li.nav-item > a.nav-link

Navbar:

.navbar-default	: .navbar-light
.navbar-toggle	: .navbar-toggler
.navbar-form	: .form-inline

Panels:

.panel	: .card
.panel-group	: .card-group
.panel-heading :	.card-header
.panel-title	: .card-title
.panel-body	: .card-body
.panel-footer	: .card-footer
.panel-footer	: .card-footer

Tables:

.table-condensed	: .table-sm
.active	: .table-active
.success	: .table-success
.info	: .table-info
.warning	: .table-warning
.danger	: .table-danger

Typography:
.list-inline now require : .list-inline-item for childs

I am aware that core frontend doesn't use all these classes, this just should help with templating.

[CaMer0n]

Thank you for this @Jimmi08 . And more accurately, we'll need to ADD these classes while retaining the existing BS3 ones to retain backward compatibility.

[Jimmi08]

Good to remind this (about adding). I know it, but maybe others will help too.

[CaMer0n]

Bootstrap 3.x	Bootstrap 4
.col--offset-	.offset-*
.col--push-	.order-*-2
.col--pull-	.order-*-1
.panel	.card
.panel-heading	.card-header
.panel-title	.card-title
.panel-body	.card-body
.panel-footer	.card-footer
.panel-primary	.card.bg-primary.text-white
.panel-success	.card.bg-success.text-white
.panel-info	.card.text-white.bg-info
.panel-warning	.card.bg-warning
.panel-danger	.card.bg-danger.text-white
.well	.card.card-body
.thumbnail	.card.card-body
.list-inline > li	.list-inline-item
.dropdown-menu > li	.dropdown-item
.nav navbar > li	.nav-item
.nav navbar > li > a	.nav-link
.navbar-right	.ml-auto
.navbar-btn	.nav-item
.navbar-fixed-top	.fixed-top
.nav-stacked	.flex-column
.btn-default	.btn-secondary
.img-responsive	.img-fluid
.img-circle	.rounded-circle
.img-rounded	.rounded
.form-horizontal	(removed)
.radio	.form-check
.checkbox	.form-check
.input-lg	.form-control-lg
.input-sm	.form-control-sm
.control-label	.col-form-label
.table-condensed	.table-sm
.pagination > li	.page-item
.pagination > li > a	.page-link
.item	.carousel-item
.help-block	.form-text
.pull-right	.float-right
.pull-left	.float-left
.center-block	.mx-auto.d-block
.hidden-xs	.d-none
.hidden-sm	.d-sm-none
.hidden-md	.d-md-none
.hidden-lg	.d-lg-none
.visible-xs	.d-block.d-sm-none
.visible-sm	.d-none.d-sm-block.d-md-none
.visible-md	.d-none.d-md-block.d-lg-none
.visible-lg	.d-none.d-lg-block.d-xl-none
.label	.badge
.badge	.badge.badge-pill

[Jimmi08]

This should be fixed, bootstrap 5 is here.

Thanks for all your effort.