Bootstrap 5 - Typography
Bootstrap v5.3.8, Typography include classes for headings, font size, width, spacing, display, margin, padding, border, opacity etc.
| Class | Property: font size, style | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| display-1 display-2 display-3 display-4 display-5 display-6 |
For large heading. display-1 is highest, display-6 is smallest. |
||||||||||||||||||
| fs-1 fs-2 fs-3 fs-4 fs-5 fs-6 |
fs stands for font size use for text size. fs-1 is highest, fs-6 is smallest. |
||||||||||||||||||
|
|||||||||||||||||||
| Class | Text Alignment, Transform |
|---|---|
| text-start text-center text-end text-{breakpoint}-{direction} |
Indicates left-aligned text Indicates center-aligned text Indicates right-aligned text Start aligned text on viewports specified viewport. |
| text-lowercase text-uppercase text-capitalize |
Indicates lowercased text Indicates uppercased text First letter of each word is capitalized |
| Class | Display Property | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|||||||||||||||
|
|||||||||||||||
|
|||||||||||||||
| align-items-start align-items-end align-items-center {breakpoints} |
Flex items at top Flex items at bottom Flex items at center Flex items with breakpoints |
||||||||||||||
| offset-1 to offset-11 offset-{breakpoint}-{size} |
Offsets are used for spacing elements in the responsive grid. Offsets can used used with different breakpoints and for different size. |
||||||||||||||
| rounded rounded-top rounded-end rounded-bottom rounded-start rounded-circle rounded-pill |
Change Border Radius | ||||||||||||||
| rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5 |
Border Round sizes range from 0 to 5 | ||||||||||||||
| Class | Box sizing | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|||||||||||||||||
| p-0 to p-5 pt-0 to pt-5 pb-0 to pb-5 ps-0 to ps-5 pe-0 to pe-5 px-0 to px-5 py-0 to py-5 p-{breakpoint}-{size} |
Define the paddings pt - padding top side pb - padding from bottom side ps - padding from start (left side) pe - padding from end (right side) px - padding from left and right side py - padding top and bottom side padding for different breakpoints |
||||||||||||||||
| border border-top border-end border-bottom border-start | Add border on all 4 sides Add top border Add right border Add bottom border Add left border |
||||||||||||||||
| border border-0 border border-top-0 border border-end-0 border border-bottom-0 border border-start-0 | To Remove border | ||||||||||||||||
| border border-primary border border-secondary border border-success border border-danger border border-warning border border-info border border-light border border-dark border border-white |
Change the border color using inbuilt theme colors. | ||||||||||||||||
| border border-opacity-10 border border-opacity-25 border border-opacity-50 border border-opacity-75 |
10% border opacity 25% border opacity 50% border opacity 75% border opacity |
||||||||||||||||
| border border-1 border border-2 border border-3 border border-4 border border-5 |
Change border width | ||||||||||||||||
| w-25 w-50 w-75 w-100 |
width: 25% width: 50% width: 75% width: 100% |
||||||||||||||||
| opacity-100 opacity-75 opacity-50 opacity-25 opacity-0 |
Set the opacity level. (v5.1) values: ( 100: 1, 75: .75, 50: .5, 25: .25, 0: 0) |
||||||||||||||||
Ad:
