Bootstrap Utilities

New

Border

  • .border
  • .border border-0
  • .border border-top-0
  • .border border-right-0
  • .border border-bottom-0
  • .border border-left-0
    • .border-primary
    • .border-secondary
    • .border-success
    • .border-danger
    • .border-warning
    • .border-info
    • .border-light
    • .border-dark
    • .border-white
    • .modal-dialog modal-sm
    • .modal-dialog modal-lg
    • .modal-dialog modal-dialog-centered
  • .rounded
  • .rounded-top
  • .rounded-right
  • .rounded-bottom
  • .rounded-left
  • .rounded-circle
  • .rounded-0

float and clearfix

  • .clearfix
    • .float-left
    • .float-right
    • .float-sm-right
    • .float-md-right
    • .float-lg-right
    • .float-xl-right
    • .float-none

Center Align

  • .mx-auto

Width

  • .clearfix
    • .w-25
    • .w-50
    • .w-75
    • .w-100
    • .mw-100(max width)

Height

  • .clearfix
    • .h-25
    • .h-50
    • .h-75
    • .h-100
    • .mh-100(max width)

Spacing

  • .{property}{sides}-{size} for xs
  • .{property}{sides}-{breakpoint}-{size} for sm, md, lg, xl
    • .{property}
      • m: margin
      • p: padding
    • .{sides}
      • t: top
      • b: bottom
      • l: left
      • r: right
      • x: left&right
      • y: top&bottom
      • blank: 4-side
    • .{size}
      • 0: 0
      • 1: .25rem
      • 2: .5rem
      • 3: 1rem
      • 4: 1.5rem
      • 5: 3rem
      • auto: auto

Shadow

  • .shadow (p-4 mb-4 bg-light)
  • .shadow-sm
  • .shadow-lg
  • .shadow-none

Vertical Align

  • .align-baseline
  • .align-top
  • .align-middle
  • .align-bottom
  • .align-text-top
  • .align-text-bottom

Responsive Embeds

  • .embed-responsive embed-responsive-21by9
  • .embed-responsive embed-responsive-16by9
  • .embed-responsive embed-responsive-4by3
  • .embed-responsive embed-responsive-1by1
    • .embed-responsive-item

Visibility

  • .visible
  • .invisible

Block Elements

  • .d-block bg-success
  • .d-sm-block
  • .d-md-block
  • .d-lg-block
  • .d-xl-block
DIV
DIV Text

D-Block D-sm-Block D-md-Block D-lg-Block D-xl-Block(resize the screen to see what happened)