Table of contents
- Sizing
- Spacing
- Text
- Background
- Borders
- Text color
- Display
- Position
- Color & background
- Colored links
- Stacks
- Stretched link
- Text truncation
- Visually hidden
Sizing
Relative to the parent
We can set the following classes for child element to control its' width:
-
.w-25
- means 25% of the parent's width; -
.w-50
; -
.w-75
; -
.w-100
; .w-auto
The same values go for .h-*
class.
We can also set max-widht: 100%
with .mw-100
and max-height: 100%
with .mh-100
.
Relative to viewport
-
.vw-100
- width is 100vw; -
.vh-100
- height is 100vh; -
.min-vw-100
- min-width is 100vw; -
.min-vh-100
- min-height is 100vw;
Spacing
Margin and padding
Classes names are constructed using {property}{sides}-{size}
, where
property:
-
m
- for margin; -
p
- for padding.
sides:
-
t
- top; -
b
- bottom; -
s
- start(left); -
e
- end(right); -
x
- left and right; -
y
- top and bottom.
size:
$spacer
variable is defined inscss/_variables.scss
and equals to1rem
-
1
=$spacer
* .25; -
2
=$spacer
* .5; -
3
=$spacer
; -
4
=$spacer
* 1.5; -
5
=$spacer
* 3; auto
We can also define margin and padding for breakpoints: {property}{sides}-{breakpoint}-{size}
.
Horizontal centering
If an element is displayed as block
, we can center horizontally by applying .mx-auto
class.
Gap
For grid
and flex
we can apply .gap-*
, .row-gap-*
and .column-gap-*
classes.
Text
Text alignment
.text-{breakpoint}-start
.text-{breakpoint}-center
.text-{breakpoint}-end
Word break
.text-break
class sets word-wrap: break-word
.
Text transform
.text-lowercase
.text-uppercase
.text-capitalize
Background
To see how each color looks and the meaning stands for the name visit.
We can set predefined background colors applying .bg-*
classes:
-
.bg-primary
; -
.bg-secondary
; -
.bg-success
; -
.bg-danger
; -
.bg-warning
; -
.bg-info
; -
.bg-light
; -
.bg-dark
;
For each of upper classes we can add
*-subtle
to make a class with more subtle background color like.bg-primary-subtle
-
.bg-body-secondary
; -
.bg-body-tertiary
; -
.bg-body
; -
.bg-black
; -
.bg-white
; -
.bg-transparent
;
We can add .bg-gradient
class to background color class - it results into semi-transparent top and fully colored bottom (ex. .bg-success.bg-gradient
).
To add opacity to predefined background color, we should override --bs-bg-opacity
variable in inline style:
<div class="bg-primary" style="--bs-bg-opacity: .5;">
This is 50% opacity success background
</div>
Borders
-
.border
- all four edges; -
.border-*
- only specific edge (top, bottom, etc.); -
.border-0
- remove all borders; -
.border-*-0
- remove specific edge;
Color
We can use the same keywords as in background colors (primary, danger, warning) for border color, using .border-*
class.
Width
To set width of border we need .border-{number-of-pixels}
class. There are only 1-5 values available.
Radius
-
.rounded-{scale}
- scale is in range from 1 to 5; -
.rounded
- a little rounded border; -
.rounded-top
- top angles are rounded; -
.rounded-bottom
; -
.rounded-start
; -
.rounded-end
; -
.rounded-circle
; -
.rounded-pill
.
We can combine these classes:
-
.rounded-5.rounded-top-0
- top angles are not rounded; -
.rounded-end-circle
- only right angles are rounded with 50% value.
Text color
Class .text-*
has the same keywords as .bg-*
class. However, instead of -subtle
postfix there is -emphasis
that means darker color:
Display
.d-*
allows almost all CSS display rules:
.d-none
.d-inline
.d-inline-block
.d-block
.d-grid
.d-inline-grid
.d-table
.d-table-cell
.d-table-row
.d-flex
.d-inline-flex
To set different display after certain breakpoint we can use .d-{breakpoint}-*
class.
Flex
For flexbox we can set direction:
<div class="d-flex flex-row"></div>
<div class="d-flex flex-sm-row"></div>
<div class="d-flex flex-column-reverse"></div>
For wrapping we apply .flex-wrap
.
We can also apply align items inside flex using .justify-content-{breakpoint}-*
and .align-items-{breakpoint}-*
where *
is value in CSS corresponding rules.
For individual alignment we should use .align-self-{breakpoint}-*
.
Position
To set position we use .position-*
class, where *
can be relative
, absolute
etc.
To arrange elements we use:
-
.top-{0/50/100}
, where50
means 50% edge position; -
.start-{0/50/100}
; -
.bottom-{0/50/100}
; -
.end-{0/50/100}
.
We can center elements applying combination of upper classes and .translate-middle
which applies translateX(-50%)
and translateY(-50%)
.
Fast positioning
We can quickly configure the position of an element:
.fixed-top
.fixed-bottom
.sticky-{breakpoint}-top
.sticky-{breakpoint}-bottom
Color & background
For the predefined background color we can use .text-bg-{primary/secondary/success/etc}
class to get contrast text color (either black or white) to background. This class replaces both .text-{color}
and .bg-{color}
.
Boostrap uses its' own color-contrast
function, which we can find in https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss. It uses relative luminance to determine contrast.
Colored links
We can color links and its' underline with .link-{primary/secondary/success/etc}
class.
Stacks
-
.vstack
- flexbox with column direction; -
.hstack
- flexbox with row direction;
Stretched link
.stretched-link
- class for link which makes containing block clickable.
<div>
<span>hey</span>
<a class="stretched-link" href="#">
link
</a>
</div>
Here, div element becomes clickable.
Text truncation
For long content sometimes we need to cut it. In CSS we use text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
rules which results in .text-truncate
bootstrap class:
<span class='text-truncate' style='width:100px;'>
Contrasting text color to background colory
</span>
//results to 'Contrast...'
Visually hidden
-
.visually-hidden
- hide an element visually while allowing it to stay exposed to assistive technologies. -
.visually-hidden-focusable
- visually hide and element while display when focused (by keyboard-only user).
Top comments (0)