bootstrap doesn't work in my create-react-app
Thunder 54
I'm trying to render my React components using traditional bootstrap instead of react-bootstrap. I'm not sure what I'm doing wrong. I have installed bootstrap via npm and used the cdn link along with the script. I feel like I've tried everything here, but my components don't load as I want.
<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 is 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 components won't show up. Instead, I got: As you can see, how a typical boot card assembly looks
Can anyone tell me what I might be doing wrong here?
pombby
Your stylesheet is linked to bootstrap 3.3.6, but you are using card
bootstrap 4
try changing 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">