To understand or get a component from this documentation, right-clic on it then use the inspector.
This bootstrap cover 80% of main needs, write an other sheet for the 20% of your project or try to reuse those 80% as much as possible.
CSS variables are used for colors and spacing (padding and margin) to have a single point to update.
Very often inline elements have relative size to the font size, so a button will be bigger if the paragraph which contains it is bigger.
.f1
.f2
.f3
.f4
.f5 (default, 1rem, 16px)
.f6
.measure-narrow Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.
.measure Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.
.measure-wide Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.
.text-left
.text-right
.text-center
.black
.gray
.white
.primary
.secondary
.warning
.alert
.bg-primary
.bg-secondary
.bg-warning
.bg-alert
.bg-black
.bg-gray-darker
.bg-gray
.bg-gray-light
.bg-gray-lighter
.bg-white
.button-group
.w-25
.w-33
.w-50
.w-75
.w-100
.p1
.p2
.p3
.p4
.m1
.m2
.m3
.m4
.flex-row
.flex-row
.flex-column
.flex-wrap
.flex-wrap.justify-center
.flex-wrap.justify-between
.flex-wrap.justify-around
.flex-row.items-start
.flex-row.items-end
.flex-row.items-center
.flex-row.items-baseline
.flex-row.items-stretch
open-iconic, use .icon class to scale svg as a font
.outline-gray
.outline-gray-light
.outline-gray-lighter