DEV Community

Farooq khan
Farooq khan

Posted on

bootstrap Components made easy for react with reactstrap .

Hi everyone,
This is my first post with dev.to .
I hope I will post more posts in future .

Now straight to the point . I'm using reactjs for my new project and I was impressed with functionalities of react.js. But still I was confused with reactjs . I know that react js is a front end framework(not a framework though) . Still I was struggling to design a perfect website with reactjs . Using bootstrap for every single component was a nightmare for me to do until I found out ReactStrap .

ReactStrap is a react component for using bootstrap components inside your reactjs app .
By using reactstrap it is easy to import boostrap components inside our react.js app.
ReactStrap is a way to quickly add Bootstrap styling to a React application.

Reactstrap contains bootstrap components already styled.
ReactStrap will make components available to you that are already styled, so all you have to do is include them into your project and tweak their

Install it using npm command.

npm install --save reactstrap react react-dom
Enter fullscreen mode Exit fullscreen mode

After installed, just import the reactstrap in your code.

import * from reactstrap;
Enter fullscreen mode Exit fullscreen mode

Or if you want particular component from reactstrap, you can import particular components from reactstrap .
For example, add Button component from reactstrap .

import { Button } from 'reactstrap';
Enter fullscreen mode Exit fullscreen mode

Then, In your render function use reactstrap component like this ,

<Button color="primary">Default button</Button>
Enter fullscreen mode Exit fullscreen mode

Simple right ?
It is even fun to add components with reactstrap .
We can also pass predefined props to control the styling.

To learn more about reactstrap , Check their ReactStrap official website

Top comments (0)