Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Typography
Typography components are flexible UI elements designed to customize and enhance the text style, size, and appearance within an interface.
Headings
Standard HTML headings from h1 to h6. Use these to create a clear hierarchy of content. h1 is the largest and most important, while h6 is the smallest. Each heading has default Bootstrap styling with appropriate font sizes and spacing.
Uppercase Headings
Transform any heading to uppercase using the .text-uppercase utility class. This is
useful for creating emphasis or matching specific design requirements while maintaining semantic
heading structure.
Small Headings
Create smaller headings by combining .text-uppercase with font size utilities like
.fs-6. Perfect for section labels, captions, or when you need a heading that
doesn't dominate the visual hierarchy.
Display Headings
Display headings are larger, more prominent headings designed for hero sections, landing pages,
or when you need maximum visual impact. Use classes .display-1 through
.display-6, where display-1 is the largest.
Lead Text
Lead text makes a paragraph stand out by increasing its font size and weight. Use the
.lead class for introductory paragraphs, article summaries, or any text that should
draw the reader's attention.
Lists
Styled lists with custom bullet points and colors. The .unordered-list
class with color variants (primary, secondary, etc.) creates colored bullet points. The
.icon-list class replaces bullets with checkmark icons, perfect for feature lists
or completed tasks.
Dropcap
A dropcap is a large initial letter that drops below the first line of a paragraph. Use the
.dropcap class with color variants to create an elegant, magazine-style opening for
articles or important content sections.
Links
Control link opacity for subtle text effects. Use .link-opacity-* classes for
static opacity (10, 25, 50, 75, 100) or .link-opacity-*-hover classes for opacity
changes on hover. Great for creating secondary navigation or subtle call-to-action links.
Link Underlines
Customize link underlines with color and opacity. Use .link-underline-*
classes to match underline colors with your theme colors. Combine with
.link-underline-opacity-* classes to control underline visibility. Perfect for
creating sophisticated link styling that matches your design system.
Link Color
Apply theme colors to links using .link-* classes (primary, secondary, success,
danger, warning). These examples combine colored links with subtle underlines that become more
prominent on hover, creating an elegant interactive effect.
On this page