Explore real styles
Use this page as a live reference for headings, paragraphs, and text utilities.
Bootstrap Typography & Text
Apply Bootstrap typography styles: headings, lead text, lists, and text utilities for consistent content styling.
Introduction
Section titled “Introduction”In this tour you’ll review Bootstrap typography basics in Wappler: headings, paragraphs, and common text utilities.
Typography sample
Section titled “Typography sample”Typography settings matter because they shape readability, hierarchy, and emphasis before any component-specific styling begins. This sample gives you a concrete visual context for headings, body text, and spacing, so the later controls make sense as deliberate readability choices rather than random tweaks.
tip: Prefer Bootstrap utilities (e.g. text-center, fw-bold, text-muted) before writing custom CSS.
Utilities are your friend
Prefer Bootstrap text utilities before reaching for custom CSS, so themes stay consistent.
Selection first
Section titled “Selection first”Before styling, make sure you’ve selected the correct node in App Structure (or the canvas) so Properties updates the right element.
Review Typography Elements
Section titled “Review Typography Elements”Now we’ll select a heading and some paragraphs and review the key Properties you’ll use most often.
Display heading
Section titled “Display heading”Headings set hierarchy. This example is a display-style heading.
Heading: Tag name
Section titled “Heading: Tag name”In Properties, set Tag name (titleType) for semantic structure (h1/h2/…).
Heading: Size
Section titled “Heading: Size”Set the visual size (titleSize) without changing the semantic tag.
Heading: ID
Section titled “Heading: ID”Use ID (theId) when you need a unique identifier for links, scripts, or tests.
Lead paragraph
Section titled “Lead paragraph”Lead paragraphs create emphasis for introductions and section summaries.
Text: Alignment
Section titled “Text: Alignment”Use Alignment (textAlign) for text-start, text-center, and text-end.
Text: Weight
Section titled “Text: Weight”Use Font Weight (textFontWeight) for fw-bold, fw-normal, and fw-light.
Muted paragraph
Section titled “Muted paragraph”Muted text is useful for secondary information and helper text.
Tip: Nested text
Section titled “Tip: Nested text”Typography is often nested (figure → blockquote → paragraph). If you need to style a nested node you can’t easily click, use App Structure as a fallback to select the exact element.
Wrap-up
Section titled “Wrap-up”Typography is a mix of semantics (the right tag) and utilities (alignment, weight, color). Keep your typography consistent across a section.
A quick typography checklist
Section titled “A quick typography checklist”When typography feels inconsistent, this short checklist usually helps:
Next steps
Section titled “Next steps”Continue with a related tour or go back to the Bootstrap tours index.