bootstrap not working within my create-react-app

Question

I am trying to render my React component using traditional bootstrap instead of react-bootstrap. I'm not sure what I'm doing wrong here. I've installed bootstrap via npm, used the cdn links as well along with the scripts. I feel like I've tried everything here but my component won't load as I want it to.

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

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Here's my component code:

import React, {Component} from "react";
export default class Home extends Component {
      render() {
      var cardStyle = {
        width: "20 rem"
      };
      return(
        <div className ="card" style = {cardStyle}>
            <img className="card-img-top" src="..." alt=""></img>
            <div className="card-block">
            <h4 className="card-title">Card title</h4>
            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" className="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        );      
      }
    }

My card component won't show up. Instead I get : as you see not how a typical bootstrap card component would look like

Can anyone tell me what I may be doing wrong here?

score 1 · Accepted Answer · answered Jan 09 '18 at 04:29

1

Your stylesheet is link to bootstrap 3.3.6 but you are using card with bootstrap 4

Try to change your css link

from

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

to

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

answered Jan 09 '18 at 04:29

Phonbopit

3,393
3
21
29

Thanks! The card has started to work, although there's still some issue with it's width. It's taking up the width of the whole screen. Bigger issue now though, adding this statement messes up my other components in which I used react-bootstrap. Would you know why that's happening? – Thunder54 Jan 09 '18 at 04:34
Issue with it's width because of you have more space in `width: "20 rem"` change to `width: "20rem"` it should work :) – Phonbopit Jan 09 '18 at 04:37
That worked! Haha rookie mistake. Lastly, would you know why my react-bootstrap components have gone wild after I've changed my css link? Thanks a ton! – Thunder54 Jan 09 '18 at 04:42

score 0 · Answer 2 · answered Jan 09 '18 at 04:20

0

Make sure webpack excuted to reflect change , check in browser developer tool all required resources loded. I would suggest using react developer tool plugin chrome which I feel very useful.

answered Jan 09 '18 at 04:20

Vin

117
2
3
9

Yup, already using that. Shows everything loaded, no issues. Using components of react-bootstrap, everything loads up perfectly. The issue happens when trying to use traditional bootstrap – Thunder54 Jan 09 '18 at 04:28

score 0 · Answer 3 · answered Jan 09 '18 at 04:25

0

If you installed via npm you can import bootstrap into your project as follows

import 'bootstrap/dist/css/bootstrap.css'

or wherever bootstrap is installed.

Place the import in your index.js file.

answered Jan 09 '18 at 04:25

luly

614
3
9

bootstrap not working within my create-react-app

3 Answers3