Please enable JavaScript.
Coggle requires JavaScript to display documents.
bootstrap 4 Utilities - Coggle Diagram
bootstrap 4 Utilities
Basic Typography
-
-
-
-
Font Weight
.font-weight-bold, .font-weight-bolder
-
.font-weight-light, .font-weight-lighter
Text Transform
.text-lowercase, .text-uppercase, .text-capitalized
-
Truncate
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis.
-
Inline List
Remove a list’s bullets and apply some light margin with a combination of two classes,
.list-inline for the <ul>, <ol>
-
-
Colors and Backgrounds
Text color
.text-primary, .text-warning...
-
Background
.bg-primary, .bg-secodary, .bg-transparent,..
-
-
Sizing, Border
Width, Height
-
25: 25%, 50: 50%, 75: 75%, 100: 200%, auto
Border
.border, .border-top, .border-right
-
add another class for the border-radius .rounded, and the particular sides of border radius .rounded-top
-
Spacing
Margin, Padding
-1 0.25 rem, -2 0.5 rem, -3 1 rem, -4 1.5rem, -5 3 rem
t: top, r: right, b: bottom, l: left
x: both sides of left and right, y: both sides of top and bottom, blank for all sides
-
-