Bootstrap components are predefined elements or features you can easily add to a website or web application, such as MediaWiki, using the Bootstrap framework. They help website creators build responsive and visually appealing user interfaces. They are designed to save time and effort in web development by providing a consistent and customizable set of user interface (UI) elements.
You can use the components on MediaWiki through the Bootstrap and the BootstrapComponents extensions. The Bootstrap extension gets automatically installed with the Chameleon skin. The Medik and Tweeki skins ship a copy of the Bootstrap framework.
15 components with 42 examples have been documented by our users and still counting! You are invited to join and add more examples.
Components
| Name | Description | Provider |
|---|---|---|
| Accordion | A group of collapsible cards in which opening one card closes all others | BootstrapComponents |
| Alert | An alert provides contextual feedback messages for typical user actions. | Skin, BootstrapComponents |
| Badge | A badge provides a way to label content. | Skin, BootstrapComponents |
| Breadcrumb | A breadcrumb indicates the current page’s location within a navigational hierarchy that automatically adds separators via CSS. | Skin |
| Button | A set of button styles that can link to pages in the wiki. | BootstrapComponents |
| Card | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. | Skin, BootstrapComponents |
| Card deck | A card deck adds cards as a single, un-attached element with equal width and height columns | Skin |
| Card group | A card group adds cards as a single, attached element with equal width and height columns | Skin |
| Carousel | A carousel cycles through images, like a slide show. | BootstrapComponents |
| Collapse | Toggle the display of a large amount of content with a button. | BootstrapComponents |
| Jumbotron | Lightweight, flexible component for showcasing hero unit style content. | BootstrapComponents |
| List group | A list group is used to display a series of content. | Skin |
| Modal | A dialog box that is displayed on top of the current page. | BootstrapComponents |
| Popover | A small pop-up box that appears next to a button when it's clicked, but that can contain more content than a tooltip. | BootstrapComponents |
| Tooltip | Displays a tooltip when hovering over an element. | BootstrapComponents |
