Mapping Bootstrap 3 into Bootstrap 4
Varbase Media Mapping responsive imagesBootstrap 3 | Bootstrap 4 | XS max ( < 768px ) | SM max ( < 767.98px ) | SM min ( >= 768px ) | MD min ( >= 768px ) | MD min ( >=992px ) | LG min ( >= 992px ) | LG min ( >=1200px ) | XL min ( >= 1200px ) |
Shifted Bootstrap 4 Breakpoints
Image classes in Bootstrap 4Bootstrap 3 | Bootstrap 4 | .img-responsive | .img-fluid | .img-circle | .rounded-circle | .img-rounded | .rounded |
Directions in Bootstrap 4Bootstrap 3 | Bootstrap 4 | .pull-right | .float-right | .pull-left | .float-left |
Visibility classes in Bootstrap 4Bootstrap 3 | Bootstrap 4 | .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 |
Form elements in Bootstrap 4Bootstrap 3 | Bootstrap 4 | .btn-default | .btn-secondary | .form-horizontal | (removed)
| .radio | .form-check | .checkbox | .form-check | .input-lg | .form-control-lg | .input-sm | .form-control-sm | .control-label | .col-form-label | .help-block | .form-text | .label | .badge | .tooltip | .bs-tooltip |
Table and page in Bootstrap 4Bootstrap 3 | Bootstrap 4 | .table-condensed | .table-sm | .pagination > li | .page-item | .pagination > li > a | .page-link |
Panel to Card in Bootstrap 4Bootstrap 3 | Bootstrap 4 | .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 | .item | .carousel-item |
| | New CSS classes with Bootstrap 4.d-flex | .no-gutter | .toast | .d-print-* | .spinner-border | .bg-* with colors for background | .d-* many variants to display | .embed-responsive-21by9 | .embed-responsive-1by1 | .justify-content-* for start, end, center ... with flex | .shadow | .row-cols classes for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks. |
Text Display size in Bootstrap 4display-1 | display-2 | display-3 | display-4 |
Orders in Bootstrap 4.order-first | .order-last | .order-0 | .order-1 | .order-2 | .order-3 | .order-4 | .order-5 | .order-6 | .order-7 | .order-8 | .order-9 | .order-10 | .order-11 | .order-12 |
Add sm, md, lg, xl to change order with responsive
Printing.d-print- The class would overrule any other .d- class. | They are the same as the screen display |
Removed from Bootstrap 4Glyph icons Halflings ( No icon libraries ) |
Buttons in Bootstrap 4Primary | btn btn-primary | Secondary | btn btn-secondary | Success | btn btn-success | Danger | btn btn-danger | Warning | btn btn-warning | Info | btn btn-info | Light | btn btn-light | Dark | btn btn-dark | Link | btn btn-link |
Dark and Light are new, they cascaded in all BS4 components CSS classes
Border and Rounded in Bootstrap 4.border | .border-left | .border-right | .border-top | .border-bottom | .border-0 reset borders | .border-top-0 | .border-right-0 | .border-bottom-0 | .border-left-0 | .rounded | .rounded-top | .rounded-right | .rounded-bottom | .rounded-left | .rounded-sm | .rounded-lg | .rounded-circle | .rounded-pill | .rounded-0 reset rounding |
| | Changed in Vartheme BS4Vartheme BS3 | Vartheme BS4 | bootstrap-print | Bootstrap 4 Print classes d-print-* | bootstrap-no-spacing | Bootstrap 4 Spacing classes m, p | Varbase Bootstrap Paragraphs colors | Varbase Bootstrap Paragraphs colors | .bg-edge2edge | .bg-edge2edge | .bs-callout | .bs-callout | .vb-tags | .vb-tags | .equal-height | .equal-height | Custom BS3 card component | Bootstrap 4 Card classes | Bootstrap-RTL | Minimal RTL with Bootstrap4 |
New with Vartheme BS4Responsive Font Sizes (RFS) | | Use the front-size() mixin |
Do not use with Vartheme BS4Not to use any old Bootstrap 3 classes
Some of them will work, but they are for old sites only. |
Bootstrap 4 resourceDefault CSS build Bootstrap 4 | | Default SCSS variables | | Default SCSS mixins | |
Bootstrap 3 resourcesDefault CSS build Bootstrap 3 | | Default LESS variables | | Default LESS mixins | |
Utility Mixines : Breakpoint sizesbreakpoint-next : Name of the next breakpoint, or null for the last breakpoint. | breakpoint-min : Minimum breakpoint width. Null for the smallest (first) breakpoint. | breakpoint-max : Maximum breakpoint width. Null for the largest (last) breakpoint. | breakpoint-infix : Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. Useful for making responsive utilities. | media-breakpoint-up : Media of at least the minimum breakpoint width. No query for the smallest breakpoint. | media-breakpoint-down : Media of at most the maximum breakpoint width. No query for the largest breakpoint. | media-breakpoint-between : Media that spans multiple breakpoint widths. | media-breakpoint-only : Media between the breakpoint's minimum and maximum widths. |
Utility Mixines : Clearfix
Utility Mixines : Border radiusborder-radius($radius: $border-radius, $fallback-border-radius: false) | border-top-radius($radius) | border-right-radius($radius) | border-bottom-radius($radius) | border-left-radius($radius) | border-top-left-radius($radius) | border-top-right-radius($radius) | border-bottom-right-radius($radius) | border-bottom-left-radius($radius) |
Utility Mixines : Gradientsgradient-bg($color) | gradient-x : Horizontal gradient, from left to right | Creates two color stops, start and end, by specifying a color and position for each color stop. | gradient-y : Vertical gradient, from top to bottom | Creates two color stops, start and end, by specifying a color and position for each color stop. | gradient-directional | gradient-x-three-colors | gradient-y-three-colors | gradient-radial | gradient-striped |
Utility Mixines : Box Shadowbox-shadow($shadow...) |
Utility Mixines : Hoverhover | hover-focus | plain-hover-focus | hover-focus-active |
Utility Mixines : Background variantbg-variant | $parent, $color | bg-gradient-variant | $parent, $color |
Utility Mixines : Alertalert-variant | $background, $border, $color |
Utility Mixines : Button variantsbutton-variant | button-outline-variant | button-size |
Utility Mixines : Caretcaret($direction: down) | caret-down | caret-up | caret-right | caret-left |
Utility Mixines : Form control stateform-control-focus | form-validation-state |
Utility Mixines : Deprecatedeprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) |
Utility Mixines : Imageimg-fluid | Responsive image | img-retina | Retina image |
Utility Mixines : Resizable
|
Created By
natshah.com
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets