Tuesday, 15 May, 2018 UTC


These days, the web is populated with single page applications (SPA) which feel fast and responsive to user interaction. Often, they are powered by JavaScript frameworks like Angular, React, and Vue.js, to mention just a few of the most popular ones.
These libraries are great tools that help keep the JavaScript code needed to build SPAs more organized and maintainable, while using clever techniques to update the DOM without slowing down the web page.
When it comes to styling the components you can create with these libraries, you're spoilt for choice: you can write your own global CSS document as you normally would on regular websites, you can write inline styles, or use UI frameworks.
This article lists a number of resources for styling your Angular, React, and Vue.js apps the Bootstrap way.
Bootstrap Interface Elements for Angular Developers
Angular is the oldest of the frameworks I deal with in this article. Its maturity and long life in the brutal life-cycle of JavaScript frameworks is a sign of its robust and reliable foundation for web projects.
What tools are out there if you want to use Bootstrap to style your Angular app?


ng-bootstrap offers a set of Bootstrap-styled components that makes building Bootstrap apps with Angular a breeze.
More specifically, this resource contains a set of Angular directives based on Bootstrap's markup and styles. To use it, it's important that you don't include any Bootstrap JavaScript files. You only need Angular and Bootstrap CSS files.
ng-bootstrap is a free and open-source project. Feel free to contribute to it or ask for new features on GitHub.


This is another great, open source modular library of Bootstrap components powered by Angular. You don't need to use jQuery or any Bootstrap JS code, although the markup and CSS are provided by Bootstrap.
To install the library using npm, type this line into the command line:
[code language="bash"]
npm install ngx-bootstrap --save
Then include the link to Bootstrap's stylesheet in index.html document:
[code language="html"]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
You can refer to the awesome docs pages on the ngx-bootstrap website for detailed explanations and tutorials.
Bootstrap Interface Elements for React Developers
React was created by the Facebook devs and is one of the trendiest JavaScript libraries for building modern user interfaces.
If you're looking to give your React app a Bootstrap makeover, here are some of the options available to you out there.


reactstrap is a fast and convenient library that lets you add a Bootstrap 4 look and feel to your React app.
The styling is provided by Bootstrap, while the JavaScript functionality is built into reactstrap components. This means that you don't need to include any jQuery or Bootstrap JS code. However, you need to include react-popper, since some dynamic Bootstrap components like dropdowns depend on Popper.js to work properly.
You can install reactstrap via a CDN:
[code language="html"]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js">
In this case, you need to include the React library and ReactTransitionGroup before reactstrap.
You can also install the library and all dependencies with NPM:
[code language="bash"]
npm install --save [email protected] react react-dom
If you're curious, hop over to the docs and learn more about each component and how to integrate reactstrap with the Create React App setup.


React-Bootstrap is an open source project which is still under active development to reach the 1.0.0 release.
Since this library doesn't support any specific Bootstrap version, you're free to include any Bootstrap stylesheet you think best suits your project. Generally speaking, including the latest Bootstrap release will ensure that you enjoy the benefits of improvements and bug fixes, therefore it should be your preferred option.
The most straightforward way of including Bootstrap in your React app is via a CDN:
[code language="html"]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
On the JavaScript front, you just need React, no jQuery or Bootstrap JS is required for Rect-Bootstrap to work. You can install this Bootstrap UI library using NPM:
[code language="bash"]
npm install --save react react-dom
npm install --save react-bootstrap
Installing the library this way, will allow you to import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the individual components you need rather than the entire package, which is great for keeping the file size under control.
Alternatively, you can include React-Bootstrap and the React libray as a a bundle using CDNJS and reference the files in your <script> tags:
[code language="html"]
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>

Material Design for Bootstrap React Version

Material Design for Bootstrap (also available for Angular and Vue) is a UI library for React that combines the look & feel of Bootstrap and Google Material Design.
Among its advantages are:
  • Being up to date with the latest release of Bootstrap
  • Awesome documentation and tutorials
  • Compatible with the latest release of React
  • Use of JSX
  • Easy installation
  • Free for personal and commercial projects
To get started with Material Design for Bootstrap just download it straight from the project's website, or:
  • use NPM:
    [code language="bash"]
    npm install mdbreact
    or yarn:
    [code language="bash"]
    yarn add mdbreact
Once you've got the files, everything is linked appropriately and ready to go. Run npm install then npm start and get coding.
Continue reading %Bootstrap UI Libraries for Angular, React and Vue.js%