Thinking in Bootstrap 4, theming with Vartheme BS4 Cheat Sheet

Mapping Bootstrap 3 into Bootstrap 4

Varbase Media Mapping responsive images

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 Breakpoints

Bootstrap 4 Breakpoints

Shifted Bootstrap 4 Breakpoints

Image classes in Bootstrap 4

Bootstrap 3	Bootstrap 4
.img-responsive	.img-fluid
.img-circle	.rounded-circle
.img-rounded	.rounded

Directions in Bootstrap 4

Bootstrap 3	Bootstrap 4
.pull-right	.float-right
.pull-left	.float-left

Visibility classes in Bootstrap 4

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

Form elements in Bootstrap 4

Bootstrap 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 4

Bootstrap 3	Bootstrap 4
.table-condensed	.table-sm
.pagination > li	.page-item
.pagination > li > a	.page-link

Panel to Card in Bootstrap 4

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

A tool to help convert to Bootstrap 4
https://upgrade-bootstrap.bootply.com

Created by Vardot

http://www.vardot.com

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 4

display-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 4

Glyph icons Halflings ( No icon libraries )

Buttons in Bootstrap 4

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

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 BS4

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

New with Vartheme BS4

Responsive Font Sizes (RFS)

https://github.com/twbs/rfs

Use the front-size() mixin

Do not use
font-size: 18px;
use
font-size(18px);

https://github.com/twbs/rfs/blob/v10/scss.scss

Do not use with Vartheme BS4

Not to use any old Bootstrap 3 classes
Some of them will work, but they are for old sites only.

https://github.com/Vardot/vartheme_bs4/blob/8.x-6.x/scss/aliases.scss

Bootstrap 4 resource

Default CSS build Bootstrap 4

https://github.com/twbs/bootstrap/blob/v4.4.0/dist/css/bootstrap.css

Default SCSS variables

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/_variables.scss

Default SCSS mixins

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/_mixins.scss

Bootstrap 3 resources

Default CSS build Bootstrap 3

https://github.com/twbs/bootstrap/blob/v3.4.1/dist/css/bootstrap.css

Default LESS variables

https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less

Default LESS mixins

https://github.com/twbs/bootstrap/blob/v3.4.1/less/mixins.less

Utility Mixines : Breakpoint sizes

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.

Breakpoint viewport sizes and media queries.
Breakpoints are defined as a map of (name: minimum width), order from small to large:
(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
The map defined in the $grid-breakpoints global variable is used as the $breakpoints argument by default.
https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_breakpoints.scss

Utility Mixines : Clearfix

clearfix

Use this mixin, do not redo that in each needed calls, just call the mixin
https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_clearfix.scss

Utility Mixines : Border radius

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)

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_border-radius.scss

Utility Mixines : Gradients

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

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_gradients.scss

Utility Mixines : Box Shadow

box-shadow($shadow...)

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_box-shadow.scss

Utility Mixines : Hover

hover

hover-focus

plain-hover-focus

hover-focus-active

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_hover.scss

Utility Mixines : Background variant

bg-variant	$parent, $color
bg-gradient-variant	$parent, $color

Contextual backgrounds
https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_background-variant.scss

Utility Mixines : Alert

alert-variant

$background, $border, $color

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_alert.scss

Utility Mixines : Badge

badge-variant

$bg

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_badge.scss

Utility Mixines : Button variants

button-variant
button-outline-variant
button-size

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_buttons.scss

Utility Mixines : Caret

caret($direction: down)

caret-down

caret-up

caret-right

caret-left

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_caret.scss

Created by Vardot

http://www.vardot.com

Utility Mixines : Form control state

form-control-focus

form-validation-state

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_forms.scss

Utility Mixines : Deprecate

deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false)

This mixin can be used to deprecate mixins or functions.
$enable-deprecation-messages is a global variable, $ignore-warning is a variable that can be passed to
some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_deprecate.scss

Utility Mixines : Image

img-fluid	Responsive image
img-retina	Retina image

Utility Mixines : Resizable

resizable

Resize anything

https://github.com/twbs/bootstrap/blob/v4.4.0/scss/mixins/_resize.scss#L3

Created By

Natshah
natshah.com

tareq_elayyan

Metadata

Languages: English

Published: 26th November, 2019
Last Updated: 30th November, 2019

Comments

No comments yet. Add yours below!

Add a Comment

Related Cheat Sheets

Bootstrap Cheat Sheet

Bootstrap Glyphicons Cheat Sheet by James Croft

Bootstrap v4 Cheat Sheet

Thinking in Bootstrap 4, theming with Vartheme BS4 Cheat Sheet by Natshah

Mapping Bootstrap 3 into Bootstrap 4

Varbase Media Mapping responsive images

Bootstrap 3 Breakp­oints

Bootstrap 4 Breakp­oints

Shifted Bootstrap 4 Breakp­oints

Image classes in Bootstrap 4

Directions in Bootstrap 4

Visibility classes in Bootstrap 4

Form elements in Bootstrap 4

Table and page in Bootstrap 4

Panel to Card in Bootstrap 4

Created by Vardot

New CSS classes with Bootstrap 4

Text Display size in Bootstrap 4

Orders in Bootstrap 4

Printing

Removed from Bootstrap 4

Buttons in Bootstrap 4

Border and Rounded in Bootstrap 4

Changed in Vartheme BS4

New with Vartheme BS4

Do not use with Vartheme BS4

Bootstrap 4 resource

Bootstrap 3 resources

Utility Mixines : Breakpoint sizes

Utility Mixines : Clearfix

Utility Mixines : Border radius

Utility Mixines : Gradients

Utility Mixines : Box Shadow

Utility Mixines : Hover

Utility Mixines : Background variant

Utility Mixines : Alert

Utility Mixines : Badge

Utility Mixines : Button variants

Utility Mixines : Caret

Created by Vardot

Utility Mixines : Form control state

Utility Mixines : Deprecate

Utility Mixines : Image

Utility Mixines : Resizable

How's Your Readability?

Help Us Go Positive!

Created By

Metadata

Comments

Add a Comment

Related Cheat Sheets

Latest Cheat Sheet

Random Cheat Sheet

About Cheatography

Behind the Scenes

Recent Activity

Bootstrap 3 Breakpoints

Bootstrap 4 Breakpoints

Shifted Bootstrap 4 Breakpoints