Utility CSS classes
Use our utility CSS classes to stylize your web elements. Additional shortcuts are available on Bootstrap .
Borders
| Class | Description |
|---|---|
.brd-solid-1 |
solid border style with width of 1px |
.brd-solid-2 |
solid border style with width of 2px |
.brd-solid-3 |
solid border style with width of 3px |
.brd-solid-4 |
solid border style with width of 4px |
.brd-solid-5 |
solid border style with width of 5px |
.brd-dotted-1 |
dotted border style with width of 1px |
.brd-gray |
gray border color (#555) |
.brd-gray-light |
light gray border color (#ddd) |
.brd-gray-dark |
dark gray border color (#222) |
.brd-primary-light |
theme's primary border color 60% tinted |
.brd-white-before |
adds white border before the content of each selected element(s). |
.brd-white-after |
adds white border after the content of each selected element(s). |
.brd-gray-light-before |
adds light gray before the content of each selected element(s). |
.brd-gray-light-after |
adds light gray border after the content of each selected element(s). |
.brd-transparent-before |
transparent border before the content of each selected element(s). |
.brd-transparent-after |
transparent border after the content of each selected element(s). |
.brd-0 |
no borders |
.brd-right |
right side solid border style with width of 1px |
.brd-left |
left side solid border style with width of 1px |
.brd-top |
top side solid border style with width of 1px |
.brd-bottom |
bottom side solid border style with width of 1px |
.rounded-50x |
border radius 50% |
.rounded-50 |
border radius 50px |
.rounded-20 |
border radius 20px |
.rounded-15 |
border radius 15px |
.rounded-5 |
border radius 5px |
.rounded-4 |
border radius 4px |
.rounded-3 |
border radius 3px |
.rounded-2 |
border radius 2px |
Colors and backgrounds
| Class | Description |
|---|---|
.color-black |
color black (#000) |
.color-black-hover |
color black (#000) that shows up on hover |
.color-white |
color black (#FFF) |
.color-white-hover |
color white (#FFF) that shows up on hover |
.color-gray-dark |
text color (#333) |
.color-gray |
gray color (#555) |
.color-highlight |
highlight theme color |
.color-highlight-hover |
highlight theme color that shows up on hover |
.color-primary |
primary theme color |
.color-primary-hover |
primary theme color that shows up on hover |
.color-standout |
standout theme color |
.color-standout-hover |
standout theme color that shows up on hover |
.color-s1 |
first secondary theme color |
.color-s2 |
second secondary theme color (darker version of .color-s1) |
.color-s3 |
third secondary theme color (darker version of .color-s2) |
.bg-gray-light |
light gray background color (#eee) |
.bg-gray-light-hover |
light gray background color (#eee) that shows up on hover |
.bg-gray-lightest |
lightest gray background color (#f5f5f5) |
.bg-gray-lightest-hover |
lightest gray background color (#f5f5f5) that shows up on hover |
.bg-alpha-40 |
black background that is 40% transparent |
.bg-alpha-50 |
black background that is 50% transparent |
.bg-alpha-60 |
black background that is 60% transparent |
.bg-alpha-70 |
black background that is 70% transparent |
.bg-alpha-80 |
black background that is 80% transparent |
.bg-alpha-90 |
black background that is 90% transparent |
.bg-highlight |
theme's highlight background color |
.bg-highlight-hover |
theme's highlight background color that shows up on hover |
.bg-primary |
theme's primary background color |
.bg-primary-hover |
theme's primary background color that shows up on hover |
.bg-standout |
theme's standout background color |
.bg-standout-hover |
theme's standout background color that shows up on hover |
.bg-s1 |
theme's first secondary background color |
.bg-s2 |
theme's second secondary background color |
.bg-s3 |
theme's third secondary background color |
.bg-primary-light |
theme's primary background color that is 60% tinted |
.bg-primary-light-hover |
theme's primary background color that is 60% tinted and shows up on hover |
.bg-highlight-light |
theme's highlight background color that is 50% tinted |
.bg-highlight-light-hover |
theme's highlight background color that is 50% tinted and shows up on hover |
.bg-standout-light |
theme's standout background color that is 60% tinted |
.bg-standout-light-hover |
theme's standout background color that is 60% tinted and shows up on hover |
.bg-secondary-light |
theme's secondary background color that is 40% tinted |
.bg-secondary-light-hover |
theme's secondary background color that is 40% tinted and shows up on hover |
.bg-primary-gradient |
theme's primary color linear gradient background |
.bg-highlight-gradient |
theme's highlight color linear gradient background |
.bg-standout-gradient |
theme's standout color linear gradient background |
.bg-secondary-gradient |
theme's secondary color linear gradient background |
.bg-primary-standout-gradient |
theme's primary color and standout color linear gradient background |
.bg-primary-highlight-gradient |
theme's primary color and highlight color linear gradient background |
.bg-standout-highlight-gradient |
theme's standout color and highlight color linear gradient background |
.bg-danger-warning-gradient |
danger color (#D24532) and warning color (#C2570F) linear gradient background |
.bg-info-success-gradient |
info color (#1C7DB5) and success color (#32852E) linear gradient background |
.bg-gray-radialgradient |
light gray color radial gradient background |
.bg-graylight-radialgradient |
lightest gray color radial gradient background |
.bg-primary-radialgradient |
theme's primary color radial gradient background |
.bg-highlight-radialgradient |
theme's highlight color radial gradient background |
.bg-standout-radialgradient |
theme's standout color radial gradient background |
.bg-secondary-radialgradient |
theme's secondary color radial gradient background |
.bg-secondarylight-radialgradient |
theme's lightest secondary color radial gradient background |
.bg-secondarylight-radialgradient |
theme's lightest secondary color radial gradient background |
Display
| Class | Description |
|---|---|
.d-flex |
display flex |
.d-block |
display block |
.hidden |
display none |
.hidden-up |
opacity 0 |
.overflow-hidden |
overflow hidden |
.overflow-visible |
overflow visible |
.overflow-auto |
overflow auto |
Positioning
| Class | Description |
|---|---|
.pos-rel |
Relative position |
.pos-abs |
Absolute position |
.pos-stc |
Static position |
.pos-fix |
Fixed position |
.relative-centered |
Centers a relatively positioned item (both vertically and horizontally) |
.relative-centered-x |
Centers a relatively positioned item (horizontally) |
.relative-centered-y |
Centers a relatively positioned item (vertically) |
.absolute-centered |
Centers an absolute-positioned item (both vertically and horizontally) |
.absolute-centered-x |
Centers an absolute-positioned item (horizontally) |
.absolute-centered-y |
Centers an absolute-positioned item (vertically) |
.top-rel-20pct |
move relative positioned element 20% below its normal position |
.top-rel-30pct |
move relative positioned element 30% below its normal position |
.top-rel-40pct |
move relative positioned element 40% below its normal position |
.top-sm-rel-40pct |
move relative positioned element 40% below its normal position in mobile |
.top-md-rel-40pct |
move relative positioned element 40% below its normal position in medium sized devices |
.top-lg-rel-40pct |
move relative positioned element 40% below its normal position in larger devices |
.top-rel-30pct |
move relative positioned element 30% below its normal position |
.top-sm-rel-30pct |
move relative positioned element 30% below its normal position in mobile |
.top-md-rel-30pct |
move relative positioned element 30% below its normal position in medium sized devices |
.top-lg-rel-30pct |
move relative positioned element 30% below its normal position in larger devices |
.top-rel-20pct |
move relative positioned element 20% below its normal position |
.top-sm-rel-20pct |
move relative positioned element 20% below its normal position in mobile |
.top-md-rel-20pct |
move relative positioned element 20% below its normal position in medium sized devices |
.top-lg-rel-20pct |
move relative positioned element 20% below its normal position in larger devices |
.top-rel-10pct |
move relative positioned element 10% below its normal position |
.top-sm-rel-10pct |
move relative positioned element 10% below its normal position in mobile |
.top-md-rel-10pct |
move relative positioned element 10% below its normal position in medium sized devices |
.top-lg-rel-10pct |
move relative positioned element 10% below its normal position in larger devices |
.top-rel-5pct |
move relative positioned element 5% below its normal position |
.top-sm-rel-5pct |
move relative positioned element 5% below its normal position in mobile |
.top-md-rel-5pct |
move relative positioned element 5% below its normal position in medium sized devices |
.top-lg-rel-5pct |
move relative positioned element 5% below its normal position in larger devices |
Sizing
| Class | Description |
|---|---|
.h-auto |
height auto |
.height-1 |
height 1px |
.height-5 |
height 5px |
.height-10 |
height 10px |
.height-15 |
height 15px |
.height-20 |
width 20px |
.height-30 |
height 30px |
.height-40 |
height 40px |
.height-50 |
height 50px |
.height-60 |
height 60px |
.height-70 |
height 70px |
.height-80 |
height 80px |
.height-100 |
height 100px |
.height-150 |
height 150px |
.height-200 |
height 200px |
.height-250 |
height 250px |
.height-300 |
height 300px |
.height-400 |
height 400px |
.height-500 |
height 500px |
.height-600 |
height 600px |
.w-auto |
width auto |
.width-1 |
width 1px |
.width-5 |
width 5px |
.width-10 |
width 10px |
.width-15 |
width 15px |
.width-20 |
width 20px |
.width-30 |
width 30px |
.width-40 |
width 40px |
.width-50 |
width 50px |
.width-60 |
width 60px |
.width-70 |
width 70px |
.width-80 |
width 80px |
.width-100 |
width 100px |
.width-150 |
width 150px |
.width-200 |
width 200px |
.width-5pct |
width 5% |
.width-10pct |
width 10% |
.width-15pct |
width 15% |
.width-20pct |
width 20% |
.width-25pct |
width 25% |
.width-30pct |
width 30% |
.width-33pct |
width 33% |
.width-35pct |
width 35% |
.width-40pct |
width 40% |
.width-45pct |
width 45% |
.width-50pct |
width 50% |
.width-60pct |
width 60% |
.width-70pct |
width 70% |
.width-75pct |
width 75% |
.width-80pct |
width 80% |
.width-90pct |
width 90% |
Spacing
| Class | Description |
|---|---|
.m-a-0 |
margin all 0 |
.m-t-0 |
margin top 0 |
.m-b-0 |
margin bottom 0 |
.m-r-0 |
margin right 0 |
.m-l-0 |
margin left 0 |
.m-x-0 |
margin left and right 0 |
.m-y-0 |
margin top and bottom 0 |
.m-a |
margin all 1rem |
.m-t |
margin top 1rem |
.m-b |
margin bottom 1rem |
.m-r |
margin right 1rem |
.m-l |
margin left 1rem |
.m-x |
margin left and right 1rem |
.m-y |
margin top and bottom 1rem |
.m-x-auto |
margin right and left auto |
.m-a-sm |
margin all .5rem |
.m-t-sm |
margin top .5rem |
.m-b-sm |
margin bottom .5rem |
.m-r-sm |
margin right .5rem |
.m-l-sm |
margin left .5rem |
.m-x-sm |
margin left and right .5rem |
.m-y-sm |
margin top and bottom .5rem |
.m-a-md |
margin all 1.5rem |
.m-t-md |
margin top 1.5rem |
.m-b-md |
margin bottom 1.5rem |
.m-r-md |
margin right 1.5rem |
.m-l-md |
margin left 1.5rem |
.m-x-md |
margin left and right 1.5rem |
.m-y-md |
margin top and bottom 1.5rem |
.m-a-lg |
margin all 3rem |
.m-t-lg |
margin top 3rem |
.m-b-lg |
margin bottom 3rem |
.m-r-lg |
margin right 3rem |
.m-l-lg |
margin left 3rem |
.m-x-lg |
margin left and right 3rem |
.m-y-lg |
margin top and bottom 3rem |
.m-t-60 |
margin top 4rem (~60px) |
.m-t-80 |
margin top 5rem (~80px) |
.m-t-100 |
margin top 6rem (~100px) |
.m-b-60 |
margin bottom 4rem (~60px) |
.m-b-80 |
margin bottom 5rem (~80px) |
.m-b-100 |
margin bottom 6rem (~100px) |
.p-a-0 |
padding all 0 |
.p-t-0 |
padding top 0 |
.p-b-0 |
padding bottom 0 |
.p-r-0 |
padding right 0 |
.p-l-0 |
padding left 0 |
.p-x-0 |
padding left and right 0 |
.p-y-0 |
padding top and bottom 0 |
.p-a |
padding all 1rem |
.p-t |
padding top 1rem |
.p-b |
padding bottom 1rem |
.p-r |
padding right 1rem |
.p-l |
padding left 1rem |
.p-x |
padding left and right 1rem |
.p-y |
padding top and bottom 1rem |
.p-a-sm |
padding all .5rem |
.p-t-sm |
padding top .5rem |
.p-b-sm |
padding bottom .5rem |
.p-r-sm |
padding right .5rem |
.p-l-sm |
padding left .5rem |
.p-x-sm |
padding left and right .5rem |
.p-y-sm |
padding top and bottom .5rem |
.p-a-md |
padding all 1.5rem |
.p-t-md |
padding top 1.5rem |
.p-b-md |
padding bottom 1.5rem |
.p-r-md |
padding right 1.5rem |
.p-l-md |
padding left 1.5rem |
.p-x-md |
padding left and right 1.5rem |
.p-y-md |
padding top and bottom 1.5rem |
.p-a-lg |
padding all 3rem |
.p-t-lg |
padding top 3rem |
.p-b-lg |
padding bottom 3rem |
.p-r-lg |
padding right 3rem |
.p-l-lg |
padding left 3rem |
.p-x-lg |
padding left and right 3rem |
.p-y-lg |
padding top and bottom 3rem |
.p-t-60 |
padding top 4rem (~60px) |
.p-t-80 |
padding top 5rem (~80px) |
.p-t-100 |
padding top 6rem (~100px) |
.p-b-60 |
padding bottom 4rem (~60px) |
.p-b-80 |
padding bottom 5rem (~80px) |
.p-b-100 |
padding bottom 6rem (~100px) |
.left-0 |
left 0 |
.left-sm |
left .5rem |
.left-n |
left 1rem |
.left-md |
left 1.5rem |
.left-lg |
left 3rem |
.right-0 |
right 0 |
.right-sm |
right .5rem |
.right-n |
right 1rem |
.right-md |
right 1.5rem |
.right-lg |
right 3rem |
.top-0 |
top 0 |
.top-sm |
top .5rem |
.top-n |
top 1rem |
.top-md |
top 1.5rem |
.top-lg |
top 3rem |
.top-minus-5 |
top -5px |
.top-minus-3 |
top -3px |
.top-minus-2 |
top -2px |
.top-minus-1 |
top -1px |
.top-5pct |
top 5% |
.top-10pct |
top 10% |
.top-20pct |
top 20% |
.top-30pct |
top 30% |
.top-40pct |
top 40% |
.top-50pct |
top 50% |
.top-60pct |
top 60% |
.top-70pct |
top 70% |
.top-80pct |
top 80% |
.top-90pct |
top 90% |
.top-100pct |
top 100% |
.bottom-0 |
bottom 0 |
.bottom-sm |
bottom .5rem |
.bottom-n |
bottom 1rem |
.bottom-md |
bottom 1.5rem |
.bottom-lg |
bottom 3rem |
.bottom-minus-5 |
bottom -5px |
.bottom-minus-3 |
bottom -3px |
.bottom-minus-2 |
bottom -2px |
.bottom-minus-1 |
bottom -1px |
.bottom-5pct |
bottom 5% |
.bottom-10pct |
bottom 10% |
.bottom-20pct |
bottom 20% |
.bottom-30pct |
bottom 30% |
.bottom-40pct |
bottom 40% |
.bottom-50pct |
bottom 50% |
.bottom-60pct |
bottom 60% |
.bottom-70pct |
bottom 70% |
.bottom-80pct |
bottom 80% |
.bottom-90pct |
bottom 90% |
.bottom-100pct |
bottom 100% |
Text
| Class | Description |
|---|---|
.text-huge |
font-size 6rem |
.text-5rem |
font-size 5rem |
.text-4rem |
font-size 4rem |
.text-3-5rem |
font-size 3.5rem |
.text-3rem |
font-size 3rem |
.text-2-5rem |
font-size 2.5rem |
.text-2rem |
font-size 3rem |
.text-1-5rem |
font-size 1.5rem |
.text-1rem |
font-size 1rem |
.font-size-sm |
font-size .75rem |
.font-size-70x |
font-size 70% |
.font-size-75x |
font-size 75% |
.font-size-80x |
font-size 80% |
.font-size-85x |
font-size 85% |
.font-size-90x |
font-size 90% |
.font-size-95x |
font-size 95% |
.font-size-11 |
font-size 0.78571rem (11px) |
.font-size-12 |
font-size 0.85714rem (12px) |
.font-size-13 |
font-size 0.92857rem (13px) |
.font-size-14 |
font-size 1rem (14px) |
.font-size-15 |
font-size 1.07143rem (15px) |
.font-size-16 |
font-size 1.14286rem (16px) |
.font-size-20 |
font-size 1.42857rem (20px) |
.font-size-25 |
font-size 1.78571rem (25px) |
.font-size-30 |
font-size 2.14286rem (30px) |
.font-size-40 |
font-size 2.85714rem (40px) |
.line-height-0-8em |
text line height is set to .8em |
.line-height-0-9em |
text line height is set to .9em |
.line-height-1em |
text line height is set to 1em |
.line-height-1-1em |
text line height is set to 1.1em |
.line-height-1-2em |
text line height is set to 1.2em |
.line-height-1-3em |
text line height is set to 1.3em |
.line-height-1-4em |
text line height is set to 1.4em |
.line-height-1-5em |
text line height is set to 1.5em |
.line-height-1-6em |
text line height is set to 1.6em |
.no-underline |
no underline text decoration property |
.underline |
underline text decoration property |
.underline-hover |
underline text decoration property on hover and on focus |
.underline-focus |
underline text decoration property on focus |
.underline-text-color |
underline of text color (#333) |
.underline-hover-text-color |
underline of text color (#333) that shows up on hover |
.underline-white |
underline of white color (#FFF) |
.underline-hover-white |
underline of white color (#FFF) that shows up on hover |
.underline-black |
underline of black color (#000) |
.underline-hover-black |
underline of black color (#000) that shows up on hover |
.underline-primary |
underline of primary theme color |
.underline-hover-primary |
underline of primary theme color that shows up on hover |
.underline-highlight |
underline of highlight theme color |
.underline-hover-highlight |
underline of highlight theme color that shows up on hover |
.underline-standout |
underline of standout theme color |
.underline-hover-standout |
underline of standout theme color that shows up on hover |
.text-primary |
primary text color (#006CE0) |
.text-success |
success text color (#1F7F35) |
.text-info |
info text color (#117888) |
.text-muted |
muted text color (#555) |
.outline-focus |
2px solid blue outline on focus |
.outline-block-offset |
2px solid blue outline on focus with outline offset -2px and display block properties |
.cursor-pointer |
cursor pointer |
Transitions and transforms
| Class | Description |
|---|---|
.transform-scale-1_05--hover |
scale up an element by 5% on hover |
.transition-0_3 |
change property values smoothly over .3 seconds |