The Idea we should stop thinking in Bootstrap 3 and think and style with Bootstrap 4
|
Bootstrap 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 )
|
|
Bootstrap 3
|
Bootstrap 4
|
|
.img-responsive
|
.img-fluid
|
|
.img-circle
|
.rounded-circle
|
|
.img-rounded
|
.rounded
|
|
Bootstrap 3
|
Bootstrap 4
|
|
.pull-right
|
.float-right
|
|
.pull-left
|
.float-left
|
|
Bootstrap 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
|
|
Bootstrap 3
|
Bootstrap 4
|
|
.btn-default
|
.btn-secondary
|
|
.form-horizontal
|
|
|
.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
|
|
Bootstrap 3
|
Bootstrap 4
|
|
.table-condensed
|
.table-sm
|
|
.pagination > li
|
.page-item
|
|
.pagination > li > a
|
.page-link
|
|
Bootstrap 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
|
|
.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.
|
|
display-1
|
|
display-2
|
|
display-3
|
|
display-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
|
|
.d-print- The class would overrule any other .d- class.
|
|
They are the same as the screen display
|
|
Glyph icons Halflings ( No icon libraries )
|
|
Primary
|
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
|
|
.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
|
|
Vartheme 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
|
|
Responsive Font Sizes (RFS)
|
|
Use the front-size() mixin
|
|
Default CSS build Bootstrap 4
|
|
Default SCSS variables
|
|
Default SCSS mixins
|
|
Default CSS build Bootstrap 3
|
|
Default LESS variables
|
|
Default LESS mixins
|
|
breakpoint-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.
|
$grid-breakpoints global variable is used as the $breakpoints argument by default.clearfix|
border-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)
|
|
gradient-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
|
|
box-shadow($shadow...)
|
|
hover
|
|
hover-focus
|
|
plain-hover-focus
|
|
hover-focus-active
|
|
bg-variant
|
$parent, $color
|
|
bg-gradient-variant
|
$parent, $color
|
|
alert-variant
|
$background, $border, $color
|
|
badge-variant
|
$bg
|
|
button-variant
|
|
|
button-outline-variant
|
|
|
button-size
|
|
caret($direction: down)
|
|
caret-down
|
|
caret-up
|
|
caret-right
|
|
caret-left
|
|
form-control-focus
|
|
form-validation-state
|
$enable-deprecation-messages is a global variable, $ignore-warning is a variable that can be passed to|
img-fluid
|
Responsive image
|
|
img-retina
|
Retina image
|
|
resizable
|
Resize anything
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.