Bootstrap

What is Bootstrap

1. Bootstrap is a free front-end framework for faster and easier web development.
2. Bootstrap includes many HTML and CSS based design templates, including typography, forms, buttons, tables, navigation, modals, image carousels, as well as optional JavaScript plugins.
3. Bootstrap also gives you the ability to easily create responsive designs.

Why Bootstrap

1. Easy to use: CSS Pre-processing is great, and every front end developer should learn it. However, not everyone is using it. Bootstrap offers less files for those of us who know how to use CSS, but it also provides the plain old CSS file for those who don’t want to use CSS pre-processing.
2. Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
3. Basic and extensive HTML elements: A website has many different elements such as headings, lists, tables, buttons, forms. All these fundamental HTML elements have been styled and enhanced in Bootstrap. There are also extensive components covered in Bootstrap, such as Dropdowns, Button Groups, Navigation Bar, Alerts.
4. Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera).

React-Bootstrap

React-Bootstrap is a library of reusable front-end components, built for React. For more reference, please go here.

Install React-Bootstrap

You can get React-Bootstrap from npm:

 npm install --save react-bootstrap

Include the following code in your public/index.html:

 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

If you want to use bootstrap themes, you should also include this one:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

Use React-Bootstrap

Let's try the following code in your src/App.js file:

 import {Button} from 'react-bootstrap';
 <Button bsStyle="success" bsSize="small" onClick={someCallback}>
 Some button
 </Button>

What we are doing here is to import a bootstrap component named "Button" from "react-bootstrap", and set the style to "success" and the size to "small".

Another way to use React-Bootstrap is to write directly in Javascript:

 var button = ReactBootstrap.Button({
 bsStyle: "success",
 bsSize: "large",
 children: "Register"
 });
 React.render(button, mountNode);

What we are doing here is to create a component named "button", and set its style to "success", size to "large" and name to "Register".

Explore more bootstrap components at here.