Font size custom

with classes .fs-* utilities only apply font-size.

class usage example size size px default variables
fs-1 << /code>p class="fs-1"> << /code>/p> Font size 40px 2.5rem 
40px
 
$h1-font-size
fs-2 << /code>p class="fs-2"> << /code>/p> Font size 32px 2rem 
32px
 
$h2-font-size
fs-3 << /code>p class="fs-3"> << /code>/p> Font size 24px 1.5rem 
24px
 
$h3-font-size
fs-4 << /code>p class="fs-4"> << /code>/p> Font size 18px 1.125rem 
18px
 
$h4-font-size
fs-5 << /code>p class="fs-5"> << /code>/p> Font size 16px 1rem 
16px
 
$h5-font-size
fs-6 << /code>p class="fs-6"> << /code>/p> Font size 14px 0.875rem 
14px
 
$h6-font-size

with heading classes (.h1 - .h6) utilities apply font-size, font-weight, and line-height

class usage example size size px default variables
h1 << /code>h1> << /code>/h1> or << /code>p class="h1"> << /code>/p> Font size 40px 2.5rem 
40px
 
$h1-font-size
h2 << /code>h2> << /code>/h2> or << /code>p class="h2"> << /code>/p> Font size 32px 2rem 
32px
 
$h2-font-size
h3 << /code>h3> << /code>/h3> or << /code>p class="h3"> << /code>/p> Font size 24px 1.5rem 
24px
 
$h3-font-size
h4 << /code>h4> << /code>/h4> or << /code>p class="h4"> << /code>/p> Font size 18px 1.125rem 
18px
 
$h4-font-size
h5 << /code>h5> << /code>/h5> or << /code>p class="h5"> << /code>/p> Font size 16px 1rem 
16px
 
$h5-font-size
h6 << /code>h6> << /code>/h6> or << /code>p class="h6"> << /code>/p> Font size 14px 0.875rem 
14px
 
$h6-font-size

Font weight custom

Where weight is one of:

class name usage example weight default variables
fw-100 
lighter
 << /code>p class="fw-100">

Font weight lighter

 100 
$font-weight-lighter
fw-300 
light
 << /code>p class="fw-300">

Font weight light

 300 
$font-weight-light
fw-400 
normal
 << /code>p class="fw-400">

Font weight normal

 400 
$font-weight-normal
fw-500 
thick
 << /code>p class="fw-500">

Font weight thick

 500 
$font-weight-thick
fw-700 
bold
 << /code>p class="fw-700">

Font weight bold

 700 
$font-weight-bold
fw-900 
bolder
 << /code>p class="fw-900">

Font weight bolder

 900 
$font-weight-bolder

Theme color custom

Normal button << /code>button class="btn btn-primary">btn-primary << /code>/button>

Outline button << /code>button class="btn btn-outline-primary">btn-primary << /code>/button>

Background, border and border radius

bg-white - background-color { background-color: #ffffff;} bootstrap variable { $white }
border - border-color { border: 1px solid #dfe1e6;} this border is default brand variable { $brand-gray }
rounded-3 - border-radius { border-radius: 0.5rem }
bg-brand-light - background-color { background-color: #f4f5f7;} brand variable { $brand-light }
border-brand-dark - border-color { border: 1px solid #dfe1e6;} brand variable { $brand-gray }
rounded-3 - border-radius { border-radius: 0.5rem }

Spacer custom

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - for classes that set the margin or padding to $spacer * .25rem =  4px
  • 2 - for classes that set the margin or padding to $spacer *  .5rem =  8px
  • 3 - for classes that set the margin or padding to $spacer * .75rem = 12px
  • 4 - for classes that set the margin or padding to $spacer =   1rem = 16px
  • 5 - for classes that set the margin or padding to $spacer * 1.5rem = 24px
  • 6 - for classes that set the margin or padding to $spacer *   2rem = 32px
  • 7 - for classes that set the margin or padding to $spacer *   3rem = 48px
  • auto - for classes that set the margin to auto

Examples

  • << /code>div class="m-0"> << /code>div> margin all m-0 = 0
  • << /code>div class="mt-1"> << /code>div> margin top mt-1 = 0.25rem = 4px
  • << /code>div class="mb-2"> << /code>div> margin bottom mb-2 = 0.5rem = 8px
  • << /code>div class="mx-3"> << /code>div> only margin left and right mx-3 = 0.75rem = 12px
  • << /code>div class="my-4"> << /code>div> only margin top and bottom my-4 = 1rem = 16px
  • << /code>div class="pe-6"> << /code>div> padding right pe-6 = 1.5rem = 24px
  • << /code>div class="ps-8"> << /code>div> padding left ps-8 = 2rem = 32px
  • << /code>div class="m-0 m-sm-7"> << /code>div> margin 0 on xs m-0 and from sm m-sm-7 = 3rem = 48px

    • For negative use prefix " n " before size

  • << /code>div class="mx-n4"> << /code>div> margin horizontaly negative mx-n4 = -1rem = -16px 
    Margin bottom mb-0  =  0px   ili    0rem
    Margin bottom mb-1  =  4px   ili  .25rem
    Margin bottom mb-2  =  8px   ili   .5rem
    Margin bottom mb-3  = 12px   ili  .75rem
    Margin bottom mb-4  = 16px   ili    1rem
    Margin bottom mb-5  = 24px   ili  1.5rem
    Margin bottom mb-6  = 32px   ili    2rem
    Margin bottom mb-7  = 48px   ili    3rem

Please press Ctrl + Shift + R to re-render an MDN page.

Početna strana
Pretraži
Bočna traka
Dopisivanje

Morate biti prijavljeni da biste ćaskali