ReactJs cards doesn`t work like in example
When i running this code output must look like this(photo 1):
but it look like this(photo 2)(i del images from source:https://react-bootstrap.github.io/components/cards/#image-overlays):
i use webstorm if needed to know
import React, { Component } from 'react';
import {Navbar,Container,Nav,Card,CardDeck,CardGroup} from 'react-bootstrap';
function App() {
return (
<CardGroup>
<Card>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
<Card.Footer>
<small className="text-muted">Last updated 3 mins ago</small>
</Card.Footer>
</Card>
<Card>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional
content.{' '}
</Card.Text>
</Card.Body>
<Card.Footer>
<small className="text-muted">Last updated 3 mins ago</small>
</Card.Footer>
</Card>
<Card>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</Card.Text>
</Card.Body>
<Card.Footer>
<small className="text-muted">Last updated 3 mins ago</small>
</Card.Footer>
</Card>
</CardGroup>
);
}
export default App;