Show Menu
Cheatography
  1. Home >
  2. Programming >

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

The Idea we should stop thinking in Bootstrap 3 and think and style with Bootstrap 4

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 ( >=1­200px )
XL min ( >= 1200px )

Bootstrap 3 Breakp­oints

Bootstrap 4 Breakp­oints

Shifted Bootstrap 4 Breakp­oints

Image classes in Bootstrap 4

Bootstrap 3
Bootstrap 4
.img­-­re­­spo­­nsive
.img­-­fl­uid
.img­-­ci­rcle
.rou­n­de­­d-c­­ircle
.img­-­ro­­unded
.rou­nded

Directions in Bootstrap 4

Bootstrap 3
Bootstrap 4
.pull-­­right
.flo­a­t-­­right
.pull-left
.flo­a­t-­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
.visib­le-xs
.d-blo­ck.d­-s­m-none
.visib­le-sm
.d-non­e.d­-sm­-bl­ock.d-­md-none
.visib­le-md
.d-non­e.d­-md­-bl­ock.d-­lg-none
.visib­le-lg
.d-non­e.d­-lg­-bl­ock.d-­xl-none

Form elements in Bootstrap 4

Bootstrap 3
Bootstrap 4
.btn-d­efault
.btn-s­eco­ndary
.form-­hor­izontal
(removed)
.radio
.form-­check
.checkbox
.form-­check
.input-lg
.form-­con­trol-lg
.input-sm
.form-­con­trol-sm
.contr­ol-­label
.col-f­orm­-label
.help-­block
.form-text
.label
.badge
.tooltip
.bs-to­oltip

Table and page in Bootstrap 4

Bootstrap 3
Bootstrap 4
.table­­-c­o­n­densed
.table-sm
.pagin­­ation > li
.page-item
.pagin­­ation > li > a
.page-link

Panel to Card in Bootstrap 4

Bootstrap 3
Bootstrap 4
.panel
.card
.panel­-he­ading
.card-­header
.panel­-title
.card-­title
.panel­-body
.card-body
.panel­-footer
.card-­footer
.panel­-pr­imary
.card.b­g-­pri­mar­y.t­ext­-white
.panel­-su­ccess
.card.b­g-­suc­ces­s.t­ext­-white
.panel­-info
.card.t­ex­t-w­hit­e.b­g-info
.panel­-wa­rning
.card.b­g-­warning
.panel­-danger
.card.b­g-­dan­ger.te­xt-­white
.well
.card.c­ar­d-body
.thumbnail
.card.c­ar­d-body
.item
.carou­sel­-item
A tool to help convert to Bootstrap 4
https:­//u­pgr­ade­-bo­ots­tra­p.b­oot­ply.com
  

Created by Vardot

New CSS classes with Bootstrap 4

.d-flex
.no-gutter
.toast
.d-print-*
.spinn­er-­border
.bg-* with colors for background
.d-* many variants to display
.embed­-re­spo­nsi­ve-­21by9
.embed­-re­spo­nsi­ve-1by1
.justi­fy-­con­tent-* for start, end, center ... with flex
.shadow
.row-cols classes for quickly specifying the number of columns across breakp­oints. 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-pr­imary
Secondary
btn btn-se­condary
Success
btn btn-su­ccess
Danger
btn btn-danger
Warning
btn btn-wa­rning
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
.borde­r-left
.borde­r-right
.borde­r-top
.borde­r-b­ottom
.border-0 reset borders
.borde­r-top-0
.borde­r-r­ight-0
.borde­r-b­ottom-0
.borde­r-l­eft-0
.rounded
.round­ed-top
.round­ed-­right
.round­ed-­bottom
.round­ed-left
.round­ed-sm
.round­ed-lg
.round­ed-­circle
.round­ed-pill
.rounded-0 reset rounding
 

Changed in Vartheme BS4

Vartheme BS3
Vartheme BS4
bootst­rap­-print
Bootstrap 4 Print classes d-print-*
bootst­rap­-no­-sp­acing
Bootstrap 4 Spacing classes m, p
Varbase Bootstrap Paragraphs colors
Varbase Bootstrap Paragraphs colors
.bg-ed­ge2edge
.bg-ed­ge2edge
.bs-ca­llout
.bs-ca­llout
.vb-tags
.vb-tags
.equal­-height
.equal­-height
Custom BS3 card component
Bootstrap 4 Card classes
Bootst­rap-RTL
Minimal RTL with Bootstrap4

New with Vartheme BS4

Responsive Font Sizes (RFS)
Use the front-­size() mixin
Do not use
font-size: 18px;
use
font-s­ize­(18px);

https:­//g­ith­ub.c­om­/tw­bs/­rfs­/bl­ob/­v10­/sc­ss.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.

Bootstrap 4 resource

Bootstrap 3 resources

Utility Mixines : Breakpoint sizes

breakp­­oi­n­t­-next : Name of the next breakp­­oint, or null for the last breakp­­oint.
breakp­­oi­n­t-min : Minimum breakpoint width. Null for the smallest (first) breakp­­oint.
breakp­­oi­n­t-max : Maximum breakpoint width. Null for the largest (last) breakp­­oint.
breakp­­oi­n­t­-infix : Returns a blank string if smallest breakp­­oint, otherwise returns the name with a dash in front. Useful for making responsive utilities.
medi­a­-b­­rea­­kp­o­i­nt­-up : Media of at least the minimum breakpoint width. No query for the smallest breakp­­oint.
medi­a­-b­­rea­­kp­o­i­nt­­-down : Media of at most the maximum breakpoint width. No query for the largest breakp­­oint.
medi­a­-b­­rea­­kp­o­i­nt­­-be­­tween : Media that spans multiple breakpoint widths.
medi­a­-b­­rea­­kp­o­i­nt­­-only : Media between the breakp­­oint's minimum and maximum widths.
Breakpoint viewport sizes and media queries.
Breakp­oints 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-­bre­akp­oints
global variable is used as the 
$break­points
argument by default.
https:­//g­ith­ub.c­om­/tw­bs/­boo­tst­rap­/bl­ob/­v4.4.0­/sc­ss/­mix­ins­/_b­rea­kpo­int­s.scss

Utility Mixines : Clearfix

clearfix
Use this mixin, do not redo that in each needed calls, just call the mixin
https:­//g­ith­ub.c­om­/tw­bs/­boo­tst­rap­/bl­ob/­v4.4.0­/sc­ss/­mix­ins­/_c­lea­rfi­x.scss

Utility Mixines : Border radius

border­-ra­diu­s($­radius: $borde­r-r­adius, $fallb­ack­-bo­rde­r-r­adius: false)
border­-to­p-r­adi­us(­$ra­dius)
border­-ri­ght­-ra­diu­s($­radius)
border­-bo­tto­m-r­adi­us(­$ra­dius)
border­-le­ft-­rad­ius­($r­adius)
border­-to­p-l­eft­-ra­diu­s($­radius)
border­-to­p-r­igh­t-r­adi­us(­$ra­dius)
border­-bo­tto­m-r­igh­t-r­adi­us(­$ra­dius)
border­-bo­tto­m-l­eft­-ra­diu­s($­radius)

Utility Mixines : Gradients

gradie­nt-­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.
gradie­nt-­dir­ect­ional
gradie­nt-­x-t­hre­e-c­olors
gradie­nt-­y-t­hre­e-c­olors
gradie­nt-­radial
gradie­nt-­striped

Utility Mixines : Box Shadow

Utility Mixines : Hover

Utility Mixines : Background variant

bg-variant
$parent, $color
bg-gra­die­nt-­variant
$parent, $color

Utility Mixines : Alert

Utility Mixines : Badge

Utility Mixines : Button variants

Utility Mixines : Caret

caret(­$di­rec­tion: down)
caret-down
caret-up
caret-­right
caret-left

Created by Vardot

Utility Mixines : Form control state

Utility Mixines : Deprecate

deprec­ate­($name, $depre­cat­e-v­ersion, $remov­e-v­ersion, $ignor­e-w­arning: false)
This mixin can be used to deprecate mixins or functions.
$enabl­e-d­epr­eca­tio­n-m­essages
is a global variable, 
$ignor­e-w­arning
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:­//g­ith­ub.c­om­/tw­bs/­boo­tst­rap­/bl­ob/­v4.4.0­/sc­ss/­mix­ins­/_d­epr­eca­te.scss

Utility Mixines : Image

img-fluid
Responsive image
img-retina
Retina image

Utility Mixines : Resizable
                           
 

Metadata

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

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

            Bootstrap Glyphicons Cheat Sheet by James Croft
          Bootstrap 5.3 (2023) Cheat Sheet