9 Bootstrap UI Component Libraries for React, Vue, Angular in 2019
Useful Bootstrap UI libraries built with React, Vue, Angular and friends.
Bootstrap is the world’s most popular front-end framework, developed to encourage consistency across tools. It contains HTML and CSS based templates for typography, forms, buttons, and other UI components.
With the latest rise of frameworks and libs like React, Vue & Angular, many projects we built to implement Bootstrap as a set of reusable UI components.
To help you get started, we’ve gathered some of the best UI kits implementing Bootstrap with “modern” frameworks. As with most things, keep in mind that this is considered an opinionated choice by some in the community.
Using Bit (GitHub) you can discover and reuse specific componets from these libraries, or your own components. They become discoverable to your team and can be played-with online, and installed with NPM/Yarn. Give it a go:
1. React Bootstrap
React-bootstrap is probably the most popular (14K stars, 300K downloads/week) implementation of Bootstrap 3+4 components in React. Each component has been built from scratch as a React component, relying entirely on the Bootstrap stylesheet to work with existing Bootstrap themes.
2. Reactstrap
Reactstrap is a “stateless React Bootstrap 4 components” library with over 6K stars which does not depend on Bootstrap Javascript. However, Poppers.js via react-popper is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns. Content is expected to be composed via props.children rather than using named props to pass in Components.
3. Material Design React Bootstrap
This library is a set of React Bootstrap components with Material Design. Components provide cross-browser compatibility Works perfectly with Chrome, Firefox, Safari, Opera and Microsoft Edge. Full support of Flexbox layout system is included to help with alignment issues, and docs are rich and helpful. You can check out this short quick-start video to get started.
4. BootstrapVue
BootstrapVue is a comprehensive and rather popular (6.5k stars) implementation of Bootstrap 4 components and grid system for Vue.js, with extensive and automated WAI-ARIA accessibility markup. It’s Built for responsive, mobile-first projects on the web using Vue.js and Bootstrap 4. It also provides two useful vue-cli templates webpack-simple and webpack.
5. UIV
A set of Bootstrap 3 UI components implemented in Vue 2. It’s lightweight with all components ~20KB Gziped, and is dependent only on Vue & Bootstrap CSS. You can individually import components, which provide support for all modern browsers (IE 9+). SSR is also supported. Take a look.
6. Material Design React Bootstrap
With over 400 UI elements, 600 icons and 70 CSS animations, this library is a feature-rich UI kit based on Bootstrap and Vue. Components are built for responsively, cross — browser compatible and are highly customizable.
7. NG Bootstrap
Angular 6 and Bootstrap 4 is an interesting combination for responsive layouts built with Angular components. Written in TypeScript with 100% test coverage, NG-Bootstrap is a UI component library built for the job. It’s only dependencies are Angular and Bootstrap 4 CSS, and it’s actively maintained.
8. AngularJS Bootstrap
At 4.5K stars ngx-bootstrap implements Bootstrap 3 and 4 widgets with Angular. It contains all core (and not only) Bootstrap components using markup and CSS provided by bootstrap so you don’t need to include original JS components. You can implement your own templates and styles, and all components are designed with extensibility and adaptivity with standardized performance for mobile and desktop alike. You can try the components here.
