bootstrap-styled v1.0.0
Docs Examples GitHub npm

Getting started

Introduction Installation Usage TypeScript Dark mode Accessibility

Customize

Overview Theming Color & tokens CSS variables Color modes

Layout

Grid Stack Ratio Breakpoints

Content

Typography Tables Images Figures

Forms

Overview Form control Select Checks & radios Range Input group Floating labels Layout Validation

Components

Accordion Alert Badge Breadcrumb Button Button group Card Carousel Close button Collapse Dropdown List group Modal Nav & tabs Offcanvas Pagination Placeholders Popover Progress Scrollspy Spinner Toast Tooltip

Helpers

Clearfix Color & background Focus ring Icon link Position Stretched link Text truncation Vertical rule Visually hidden

Utilities

Box & utility props

Icons

Icon

About

License Credits

Examples

Examples

Standalone full-page compositions built entirely from @metatoy/bootstrap-styled components. Each opens as its own chrome-free page — visually indistinguishable from native Bootstrap, the React way. Open one, then flip the theme to see it recolor live.

  • Headers Brand mark, centered pill navigation, and right-aligned auth buttons in a responsive bar. View example →
  • Heroes A centered hero with a display heading, constrained lead, and a responsive CTA pair. View example →
  • Features A bordered section heading over a three-column grid of icon tiles. View example →
  • Navbars Collapsing responsive navigation bars with brand, links, and toggler. View example →
  • Sidebars A fixed vertical sidebar navigation shell for app-style layouts. View example →
  • Footers Multi-column site footers with link groups and a bottom bar. View example →
  • Jumbotron A padded, rounded call-to-action panel — the classic marketing hero block. View example →
  • Kitchen sink A dense page exercising many components at once — the everything-at-parity showcase. View example →

On this page