CODEWITHSUNDEEP
javascriptreactjsnpmbootstrap-4
Thunder54
Thunder54

Reputation: 55

bootstrap not working within my create-react-app

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?

Upvotes: 4

Views: 1772

Answers (3)

Phonbopit
Phonbopit

Reputation: 3383

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">

Upvotes: 1

luly
luly

Reputation: 614

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.

Upvotes: 0

Vin
Vin

Reputation: 115

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.

Upvotes: 0

Related Questions