Bootstrap Components
Explore Bootstrap components in Wappler: learn what’s available and how to use common UI building blocks.
Components on a Page
This tour uses a small set of common Bootstrap components to build a practical mental model for how Wappler exposes them in Design View and Properties. Start by seeing each example as a reusable pattern, then follow the properties that most often change appearance, behavior, and structure in real projects.
Button example
Buttons trigger actions like submit, save, and navigation. Let’s start with a primary button and review the key options that shape its look and behavior.
tip: Use clear, descriptive labels (verb + object) so the action is obvious.
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 Button: ID and see how it fits into this area.
Button: ID
Use ID to give the button a stable identifier (useful for CSS/JS targeting and deterministic tours). This step matters because Button: ID is part of Selection Panels Properties Theid, and understanding that context makes the next action easier to repeat in your own project.
Button: Style
Use Style to pick the button variant (primary/secondary/outline-*, etc.). This step matters because Button: Style is part of Selection Panels Properties Btnbtnstyle, and understanding that context makes the next action easier to repeat in your own project.
Button: type
Inside forms, the type attribute matters. Use button for non-submit actions and submit when the button should submit the form.
Button: Disabled
Use Disabled for loading/locked states so users can’t click multiple times. This step matters because Button: Disabled is part of Selection Panels Properties Btndisabled, and understanding that context makes the next action easier to repeat in your own project.
Button variants
Outline variants keep visual weight low and work well for secondary actions. This step matters because Button variants is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
tip: If two buttons should be aligned and spaced consistently, set spacing on the parent container when possible.
Destructive variant
Use the danger variant sparingly and only for actions that are genuinely destructive (delete, remove, revoke). This step matters because Destructive variant is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
Alert example
Alerts communicate status messages—success, warnings, errors, or neutral information. This step matters because Alert example is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
tip: Choose the variant that matches severity, and keep the message short and actionable.
Alert: Type
Use Type to control the alert variant (info/success/warning/danger). This step matters because Alert: Type is part of Selection Panels Properties Alerttype, and understanding that context makes the next action easier to repeat in your own project.
tip: Keep alert messages short and actionable. For more complex content, consider a card or a toast.
Alert: Closable
Use Closable to add a close button so users can dismiss the alert. This step matters because Alert: Closable is part of Selection Panels Properties Alertclosable, and understanding that context makes the next action easier to repeat in your own project.
Badge example
Badges are compact labels for counts, status, and short metadata. This step matters because Badge example is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
tip: Use badges for small, scannable metadata—not for long text.
Badge: Style
Use Style to control the badge background color. This step matters because Badge: Style is part of Selection Panels Properties Bgbtnstyle, and understanding that context makes the next action easier to repeat in your own project.
Badge: Text
Use Text to change the label or count shown. This step matters because Badge: Text is part of Selection Panels Properties Badgetext, and understanding that context makes the next action easier to repeat in your own project.
Card nested content
Cards often contain nested content like links, buttons, and lists. Let’s look at a call-to-action link inside a card body.
tip: Aim for one clear primary action per card when possible.
Card container
Cards group related content into a single surface, with optional header/body/footer sections.
tip: Use the header/footer for repeated structure, and keep the body focused on the content.
List group item in a card
List groups present a vertical series of related items and are often used inside cards for menus, results, and settings.
tip: List group items are great for menus, settings lists, and compact content blocks.
List group item: Active
Use Active to mark the current/selected item. This step matters because List group item: Active is part of Selection Panels Properties Listgroupitemactive, and understanding that context makes the next action easier to repeat in your own project.
List group item: Disabled
Use Disabled to make the item non-interactive. This step matters because List group item: Disabled is part of Selection Panels Properties Listgroupitemdisabled, and understanding that context makes the next action easier to repeat in your own project.
Card CTA
Calls-to-action in cards are usually links or buttons that lead to detail pages or start a primary workflow.
Card CTA: href
Use Link to control where the CTA navigates. This step matters because Card CTA: href is part of Selection Panels Properties Anchorbtnhref, and understanding that context makes the next action easier to repeat in your own project.
Card CTA: target
Use target to open in the same tab or a new tab/window. This step matters because Card CTA: target is part of Selection Panels Properties Anchorbtntarget, and understanding that context makes the next action easier to repeat in your own project.
Next steps
Continue with a focused component tour, or go back to the Components index to browse the full list. For layout and styling patterns that apply everywhere, use the Utilities tours.