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
In this tour you’ll review Bootstrap typography basics in Wappler: headings, paragraphs, and common text utilities.
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
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
Now we’ll select a heading and some paragraphs and review the key Properties you’ll use most often.
Display heading
Headings set hierarchy. This example is a display-style heading. This step matters because Display heading is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
Orient yourself in Properties panel
Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Heading: Tag name and see how it fits into this area.
Heading: Tag name
In Properties, set Tag name (titleType) for semantic structure (h1/h2/…). This step matters because Heading: Tag name is part of Selection Panels Properties Titletype, and understanding that context makes the next action easier to repeat in your own project.
Heading: Size
Set the visual size (titleSize) without changing the semantic tag. This step matters because Heading: Size is part of Selection Panels Properties Titlesize, and understanding that context makes the next action easier to repeat in your own project.
Heading: ID
Use ID (theId) when you need a unique identifier for links, scripts, or tests. This step matters because Heading: ID is part of Selection Panels Properties Theid, and understanding that context makes the next action easier to repeat in your own project.
Lead paragraph
Lead paragraphs create emphasis for introductions and section summaries. This step matters because Lead paragraph is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
Text: Alignment
Use Alignment (textAlign) for text-start, text-center, and text-end. This step matters because Text: Alignment is part of Selection Panels Properties Textalign, and understanding that context makes the next action easier to repeat in your own project.
Text: Weight
Use Font Weight (textFontWeight) for fw-bold, fw-normal, and fw-light. This step matters because Text: Weight is part of Selection Panels Properties Textfontweight, and understanding that context makes the next action easier to repeat in your own project.
Muted paragraph
Muted text is useful for secondary information and helper text. This step matters because Muted paragraph is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
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
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
When typography feels inconsistent, this short checklist usually helps:
Next steps
Continue with a related tour or go back to the Bootstrap tours index.