Components

Wappler documentation

Components

Browse Bootstrap components in Wappler and jump into focused tours for each component type.

Open in Wappler

Bootstrap components are UI building blocks (buttons, alerts, navigation, cards, forms, modals, and more). Pick a focused tour.

Common components

ButtonsUse Bootstrap buttons: variants, sizes, states, icons, and common button patterns.View guide→Button groupsGroup related actions with button groups and toolbars, including sizing and alignment.View guide→BadgesUse badges for counts and status labels, including pill styles and contextual colors.View guide→AlertsUse alerts for feedback messages, including dismissible alerts and contextual states.View guide→DropdownsBuild dropdown menus in Wappler and learn the practical options: alignment, sizing, split buttons, and nav dropdown patterns.View guide→List groupsUse list groups for structured lists, selection states, and grouped content.View guide→

Navigation & paging

TabsBuild tabbed navigation and content panes, including active states and accessibility basics.View guide→BreadcrumbsBuild Bootstrap breadcrumbs in Wappler, including separators and the active page state for accessible navigation.View guide→PaginationUnderstand Bootstrap pagination patterns and build paging controls that fit common list and table layouts.View guide→

Overlays & helpers

ToastsUse toasts for non-blocking notifications, including stacking and dismiss behavior.View guide→TooltipsTooltips provide compact help text. Learn how to use them in Wappler, including trigger behavior and placement.View guide→PopoversUse popovers for richer contextual help, including placement and trigger options.View guide→

Disclosure

AccordionUse accordions to organize content into collapsible sections with smooth navigation.View guide→CollapseUse collapse for show/hide sections with toggles and smooth transitions.View guide→

Related tours

Bootstrap ComponentsExplore Bootstrap components in Wappler: learn what’s available and how to use common UI building blocks.View guide→Loading indicators (progress & spinners)Use spinners and loading indicators to communicate progress and improve perceived performance.View guide→Bootstrap PlaceholdersUse Bootstrap placeholders to show loading states and keep page layout stable while data loads.View guide→Bootstrap CardsBuild card-based UI blocks with headers, images, lists, and layout combinations for dashboards and content.View guide→Bootstrap FormsBuild Bootstrap-styled forms with layout helpers and validation feedback, and learn patterns for a smooth form UX.View guide→Bootstrap ModalsUse Bootstrap modals: triggers, sizing, scroll behavior, and best practices for reusable, accessible dialogs.View guide→