Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. View details.
Default
Additional content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Badges
Documentation and examples for badges, our small count and labeling component. View details.
Default
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges with button
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. View details.
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. View details.
Default
Outline buttons
Small buttons
Active state
Button group Basic
Button toolbar
Collapses
Toggle the visibility of content across your project with a few classes and our JavaScript plugins. View details.
Accordion
Link with href & data-target
Multiple targets
Cards
Use default Kidz markup to display Card elements. See the Kidz documentation for a full list of options and modifiers. View Card on Bootstrap.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereForms
Use default Kidz markup to display Forms elements. See the Kidz documentation for a full list of options and modifiers. View Forms on Bootstrap.
Forms Basic
Input Group
Dropdowns
Use default Kidz markup to display Dropdowns elements. See the Kidz documentation for a full list of options and modifiers. View Dropdowns on Bootstrap.
Dropdown Default
Dropdown Left
Dropdown Right
List Group
Use default Kidz markup to display List Group elements. See the Kidz documentation for a full list of options and modifiers. View List Group on Bootstrap.
Default List Group
List Group With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
- Cras justo odio 1
- Dapibus ac facilisis in 1
- Morbi leo risus 1
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
modals
Use default Kidz markup to display List Group elements. See the Kidz documentation for a full list of options and modifiers. View Modal on Bootstrap.
Modal Default
Modal Scrolling long content
Paginations
Use default Kidz markup to display pagination elements. See the Kidzdocumentation for a full list of options and modifiers. View Pagination on Bootstrap.
Pagination Default
Tooltips
Use default Kidz markup to display Tooltips elements. See the Kidz documentation for a full list of options and modifiers. View Tooltips on Bootstrap.
Tooltips Default
Progress
Use default Kidz markup to display Progress elements. See the Kidz documentation for a full list of options and modifiers. View Progress on Bootstrap.
