Bootstrap Components
Explore Bootstrap components in Wappler: learn what’s available and how to use common UI building blocks.
Components on a Page
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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.