Bootstrap 5 - Typography
Bootstrap Typography include classes for headings, font, width. Bootstrap Utility include classes for Border, spacing, display etc.
| Class | Description |
|---|---|
| display-1 display-2 display-3 display-4 display-5 display-6 |
When you need a heading to stand out, consider using a display classes, for larger heading. $display-font-sizes: ( 5rem, 4.5rem, 4rem, 3.5rem, 3rem, 2.5rem ); |
| 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 only the first letter of each word is capitalized |
| fs-1 fs-2 fs-3 fs-4 fs-5 fs-6 |
Text font size |
| fw-bold fw-bolder fw-normal fw-light fw-lighter fst-italic fst-normal |
Bold text Bolder weight text Normal weight text Light weight text Lighter weight text Italic text Text with normal font style |
| w-25 w-50 w-75 w-100 |
width: 25% width: 50% width: 75% width: 100% |
| d-none d-block d-inline d-flex d-grid d-{breakpoint}-{display value} |
Display none on all devices Visible on all devices Display in same line. display flex display grid can be used on particular breakpoint |
| 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. |
| m-0 to m-5 mt-0 to mt-5 mb-0 to mb-5 ms-0 to ms-5 me-0 to me-5 mx-0 to mx-5 my-0 to my-5 m-{breakpoint}-{size} |
6 classes to define margins on all 4 sides. mt is use to define margin from top side mb is use to define margin from bottom side ms is use to define margin from left side me is use to define margin from right side mx is use to define margin for left and right side my is use to define margin for top and bottom side can use breakpoint with different size |
| 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} |
6 classes to define paddings on all 4 sides. pt is use to define padding from top side pb is use to define padding from bottom side ps is use to define padding from left side pe is use to define padding from right side px is use to define padding for left and right side py is use to define padding for top and bottom side can use breakpoint with different size |
| 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 |
Remove border Remove top border Remove right border Remove bottom border Remove left 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 utilities 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 |
| 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 |
