What's the most easiest way to use bootstrap in gatsby.js project?

JavaScript
1

There are a couple of different libraries I see online.

Which one should I use? Is there an official one??

Also , I can see that I have two bootstrap related dependency.

Should I just use the 1st one “Bootstrap”??

49%20PM
49%20PM1379×922 139 KB

I am confused.

2

react-bootstrap is a replacement for reactstrap, and is more actively maintained. Go with react-bootstrap.

1 Like
3

whats the difference between

bootstrap:4.2.1

and

"react-bootstrap": "^1.0.0-beta.5",

in the dependencies list above??

sorry I am new to react.

4

@chuckadams should I keep them both?? What should I use when writing my site??
bootstrap or reactbootstrap???

5

Bootstrap is the CSS framework.
React-bootstrap contains the react components which are built using Bootrap CSS.

So basically you need both!

1 Like
6

I see. So if I am writing things in (for example) index.js, I have to use reactbootstrap right?

1 Like
7

Well, there are basically two ways you could do it.

First, you can use the classes from the bootstrap framework on your components - for this you wouldn’t need the reactbootstrap library. You’ll only need to have the bootstrap.css imported into your code.

import React from 'react';
import '../path_to/bootstrap.min.css';

const MyComponent = () => (
    <div>
        <p>This contains a button which uses the bootstrap.css</p>
        <button class="btn btn-primary">Click me</button>
    </div>
);

Second, you can use the components provided by reactbootstrap in your code (index.js, etc). Those components are already styled using bootstrap.

import React from 'react';
import { Button } from 'react-bootstrap';

const MyComponent = () => (
      <div>
        <p>This contains a button which is exported by react-bootstrap</p>
        <Button variant="primary">Primary</Button>
    </div>
);
3 Likes
8

wow. This is what I need. Thank you.
I am fairly new to react so I got a little confused there.

Thank you so much!

1 Like
9

Is is possible to pull bootstrap in using a cdn?

1 Like
10

Yes. Check their official website and you can find a CDN

11

import button from ‘react-bootstrap/Button’
Not…
import {Button} from ‘react-bootstrap’

Is the proper way, else you over burden the user with huge sized file. There is a Major difference.