How to use Bootstrap in a Reactjs project

Styling is a little bit different in Reactjs, so you cannot use Bootstrap in a traditional way. In this tutorial I’m going to show you an easy way to add Bootstrap to a Reacjs project. As we can’t use the traditional Bootstrap we have to use another version called React-Bootstrap, it’s basically the same framework, but it was rebuilt so we can use it with React. You can install it in your project via:

npm install --save react-bootstrap

React-bootstrap doesn’t come with the CSS, so you have to add it manually to your index.html:

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

Ok, we’re already done with the setup. Now we’re ready to import the components and start using them. To give you an example of how to do that I’m going to import the Bootstrap FormControl component and use it in my project.

import React, { Component } from 'react';
import FormControl from '../node_modules/react-bootstrap/lib/FormControl';
 
class Field extends Component {
  render() {
    return (
        <FormControl type="text"/> //<-- This is equivalent to <input class="form-control" type="text"/>
    );
  }

Note that in line 2 I’m importing the FromControl from the react-bootstrap folder inside the node_modules. I recommend you to check this folder so you can see all the components you have available. If you run your project now you’ll see the bootstrap input you’re used to.

That’s pretty much it, of course not every react-boostrap component will be as simple as this one, so if you have any doubts on how to use them please let me know in the comments.

Recommended for you

Reactjs Error: Adjacent JSX elements must be wrapped in an enclosing tag This is a very common Reactjs error, specially for beginners. If you are getting this error you code probably looks like this: class App extends Component { render() { return ( ); } } The problem is that your render function is returning two elements, i...
Reacjs Error: The `style` prop expects a mapping from style properties to values, not a string. For ... This error occurs when you try to pass regular CSS strings to the style attribute of an HTML element. In React, the styling is different, instead of an string the style attribute expects an object. So instead of doing this: text you should do this: var pStyle { fontSize: '12px'...
ReactJS DataTable with Sort, Filter and Pagination Example (PART 1) fixed-data-table home page Today we're going to learn how to create a simple datatable for react using the FixedDataTable module, since it uses Javascript ES6 code you must have at least some basic knowledge about it. To c ompile our ES6 code we're going to use Babel and Webpack, since our js fi...
React.js Tutorial: Consuming JavaEE RESTful Web Services In this post I'm going to show how to consume Web Services with React.js, more specificalyJavaEE RESTful Web Services. I've already written a post showing how to create these web services with EJB 3, if you haven't seen it yet just click on this link for more details, but if you're already familiar ...

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>