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

Boot­strap 3
Boot­strap 4
XS max ( < 768px )
SM max ( < 767.9­8px )
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

Boot­strap 3
Boot­strap 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

Boot­strap 3
Boot­strap 4
.pull-­­right
.flo­a­t-­­right
.pull-left
.flo­a­t-­left

Visibility classes in Bootstrap 4

Boot­strap 3
Boot­strap 4
.hid­den­-xs
.d-n­one
.hidden-sm
.d-sm-none
.hidden-md
.d-md-none
.hidden-lg
.d-lg-none
.vis­ibl­e-xs
.d-b­loc­k.d­-sm­-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

Boot­strap 3
Boot­strap 4
.btn­-de­fault
.btn­-se­con­dary
.form-­hor­izontal
(rem­oved)
.radio
.for­m-c­heck
.che­ckbox
.for­m-c­heck
.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

Boot­strap 3
Boot­strap 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

Boot­strap 3
Boot­strap 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
.car­d.c­ard­-body
.thumbnail
.card.c­ar­d-body
.item
.car­ous­el-­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
.bor­der-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
.rou­nde­d-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­-si­ze(­18p­x);

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

brea­kp­­oin­­t-­next : Name of the next breakp­­oint, or null for the last breakp­­oint.
brea­kp­­oin­­t-­min : Minimum breakpoint width. Null for the smallest (first) breakp­­oint.
brea­kp­­oin­­t-­max : Maximum breakpoint width. Null for the largest (last) breakp­­oint.
brea­kp­­oin­­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­r­ea­­kpo­­in­t­-up : Media of at least the minimum breakpoint width. No query for the smallest breakp­­oint.
medi­­a-­b­r­ea­­kpo­­in­t­-­down : Media of at most the maximum breakpoint width. No query for the largest breakp­­oint.
medi­­a-­b­r­ea­­kpo­­in­t­-­be­­tween : Media that spans multiple breakpoint widths.
medi­­a-­b­r­ea­­kpo­­in­t­-­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­-br­eak­points global variable is used as the $brea­kpo­ints 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)
grad­ien­t-x : Horizontal gradient, from left to right
Creates two color stops, start and end, by specifying a color and position for each color stop.
grad­ien­t-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

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.
$enab­le-­dep­rec­ati­on-­mes­sages is a global variable, $igno­re-­war­ning 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