The bootstrap components made with styled-components.

• Documentation
• Why?
• Installation
• Usage
• Components
• Related
• License

I wanted to use bootstrap with React for fast prototypes, or as entrypoint for my own UI Component Library, or if I needed just one bootstrap component for my application, now I can simply install that specific component. To work with ease with any other libary or framework these components are built with styled-components.

I also wanted to learn a bit more on how CSS works and on how to build a CSS UI Library from scratch, mostly but not only by reading the bootstrap CSS code and the MDN web docs. I also wanted to learn how to manage and maintain a monorepo with multiple packages based on lerna.

You can install all bootstrap components with...

Note: every component has a peer dependency on styled-components and styled-system. To use this components you also need to npm i styled-components styled-system -S.

$ npm i styled-bootstrap-components -S

or

$ yarn add styled-bootstrap-components

or you can install just the components that you need by following the installation guides in the components section.

For detailed information (also on how to customize this components) take a look at the documentation.

Most of this components are using styled-system.

To see which components are available take a look at the components section.

// whatever components you need
import { Button } from 'styled-bootstrap-components';

export const myComponent = (props) => (
  <Button>Hello, World!</Button>
);

For detailed information take a look at the documentation.

• Alert Component
• Badge Component
• Base Components
• Breadcrumb Component
• Button Component
• Card Component
• Container Component
• Dropdown Component
• Form Component
• Grid Component
• Jumbotron Component
• Listgroup Component
• Modal Component
• Nav Component
• Navbar Component
• Popover Component
• Table Component
• Tooltip Component

• bootstrap
• styled-components
• styled-system

MIT © Lukas Aichbauer