Helper css classes
Contextual colors
| Class name | Example |
|---|---|
.text-muted
|
Example text |
.text-primary
|
Example text |
.text-success
|
Example text |
.text-info
|
Example text |
.text-warning
|
Example text |
.text-danger
|
Example text |
Border radius
| Class name | Example |
|---|---|
.b-r-xs
|
Example text
|
.b-r-sm
|
Example text
|
.b-r-md
|
Example text
|
.b-r-lg
|
Example text
|
.b-r-xl
|
Example text
|
Hr Line
| Class name | Example |
|---|---|
Standard <hr>
|
|
.hr-line-dashed
|
|
.hr-line-solid
|
|
Paddings
| Class name | Example |
|---|---|
.p-xxs
|
Example text
|
.p-xs
|
Example text
|
.p-sm
|
Example text
|
.p-md
|
Example text
|
.p-lg
|
Example text
|
.p-xl
|
Example text
|
.no-paddingsremove all paddings |
Example text
|
.p-w-(xs,sm,md,lg,xl)padding width |
Example text
|
.p-h-(xs,sm,md,lg,xl)height width |
Example text
|
Borders
| Class name | Example |
|---|---|
.border-left
|
Example text
|
.border-right
|
Example text
|
.border-top
|
Example text
|
.border-bottom
|
Example text
|
.no-bordersremove all borders |
Example text
|
.border-left-right
|
Example text
|
.border-top-bottom
|
Example text
|
.border-size-(sm,md,lg,xl)
|
Example text
|
Width, height
| Class name | Description |
|---|---|
.h-150
|
min-height: 150px; |
.h-200
|
min-height: 200px; |
.h-300
|
min-height: 300px; |
.w-150
|
min-width: 150px; |
.w-200
|
min-width: 200px; |
.w-300
|
min-width: 300px; |
Contextual backgrounds
| Class name | Example |
|---|---|
.bg-muted
|
Example text
|
.bg-primary
|
Example text
|
.bg-success
|
Example text
|
.bg-info
|
Example text
|
.bg-warning
|
Example text
|
.bg-danger
|
Example text
|
Images
| Class name | Example |
|---|---|
.rounded-circle
|
|
.rounded
|
|
.img-thumbnail
|
|
.img-sm
|
|
.img-md
|
|
.img-lg
|
|
Basic font width
| Class name | Description |
|---|---|
.font-normal
|
Example text |
.font-bold
|
Example text |
.font-italic
|
Example text |
.text-uppercase
|
Example text |
.text-lowercase
|
Example text |
.text-capitalize
|
Example text |
Margins
| Class name | Example |
|---|---|
.m-xxs
|
Example text
|
.m-xs
|
Example text
|
.m-sm
|
Example text
|
.m-md
|
Example text
|
.m-lg
|
Example text
|
.m-xl
|
Example text
|
.m-n
|
Example text
|
.m-l / m-l-(xs,sm,md,lg,xl)margin left |
Example text
|
.m-l-n / m-l-n-(xs,sm,md,lg,xl)margin left negative |
Example text
|
.m-l-noneclear margin left |
Example text
|
.m-t / m-t-(xs,sm,md,lg,xl)margin top |
Example text
|
.m-t-n / m-t-n-(xs,sm,md,lg,xl)margin top negative |
Example text
|
.m-t-noneclear margin top |
Example text
|
.m-r / m-r-(xs,sm,md,lg,xl)margin right |
Example text
|
.m-r-n / m-r-n-(xs,sm,md,lg,xl)margin right negative |
Example text
|
.m-r-noneclear margin right |
Example text
|
.m-b / m-b-(xs,sm,md,lg,xl)margin bottom |
Example text
|
.m-b-n / m-b-n-(xs,sm,md,lg,xl)margin bottom negative |
Example text
|
.m-b-noneclear margin bottom |
Example text
|
.no-marginsremove all margins |
Example text
|