9 Bootstrap UI Component Libraries for 2018

Useful Bootstrap UI libraries built withReact,Vue,Angularand 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 easily share any component-library as a collection of individual components, which can be used and developed anywhere. It also provides a playful visual component experience, so feel free to try it.

Bit - Share and build with code components

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.

react-bootstrap/react-bootstrap

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.

reactstrap

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.

• mdbootstrap/React-Bootstrap-with-Material-Design
• React - Components

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 .

bootstrap-vue/bootstrap-vue

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.

wxsms/uiv

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.

• mdbootstrap/Vue-Bootstrap-with-Material-Design
• Vue Bootstrap with Material Design - Powerful and free UI KIT

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.

• Example usage of the rating widget from https://ng-bootstrap.github.io - StackBlitz
• ng-bootstrap/ng-bootstrap

8. AngularJS Bootstrap

At 15k stars, this library is a set of Native AngularJS directives for Bootstrap with a small footprint (20kB gzipped) and no JS dependencies (jQuery, bootstrap JS). You can download v2.5 here and view the directives here .

angular-ui/bootstrap

9. NGX 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 .

valor-software/ngx-bootstrap

Honorable mentions

• Angular 6, Bootstrap 4 and Material Design - Powerful and free UI KIT.
• kzima/vuestrap-base-components
• MikeCostello/bootstrap-web-components
• LostInBrittany/granite-bootstrap

Learn more

• 5 Tools For Faster Development In React
• 11 JavaScript Animation Libraries For 2018
• 11 React UI Component Playgrounds for 2018

9 Bootstrap UI Component Libraries for 2018 was originally published inBits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.