Card
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Card basic
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Button, Card } from 'react-bootstrap';
//Image
import CardImage from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicCard = () => {
return (
<Card>
<Card.Img variant="top" src={CardImage} alt="Card Img Cap" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
}
export default BasicCard;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card types
oggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap';
//Image
import CardImage from '../../../Assets/dist/img/placeholder_card.jpg';
const CardTypes = () => {
return (
<Row>
<Col xl={4} sm={6} xs={12}>
<Card>
<Card.Img variant="top" src={CardImage} alt="Card Img Cap" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col xl={4} sm={6} xs={12}>
<Card className="card-shadow">
<Card.Img variant="top" src={CardImage} alt="Card Img Cap" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col xl={4} sm={6} xs={12}>
<Card className="card-flush">
<Card.Img variant="top" src={CardImage} alt="Card Img Cap" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardTypes;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Header and Footer
You may add a header and footer by adding a <Card.Header> and <Card.Footer> component.
Card Header
Special title treatment
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Button, Card } from 'react-bootstrap';
const CardHeaderAndFooter = () => {
return (
<Card>
<Card.Header>Card Header</Card.Header>
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
<Card.Footer>Card Footer</Card.Footer>
</Card>
);
}
export default CardHeaderAndFooter;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Titles, text, and links
Using <Card.Title>, <Card.Subtitle>, and <Card.Text> inside the <Card.Body> will line them up nicely. <Card.Link>s are used to line up links next to each other.
Card Title
Card Subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card LinkAnother Linkimport React from 'react';
import { Card } from 'react-bootstrap';
const CardComponents = () => {
return (
<Card>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
);
}
export default CardComponents;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there.Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
import React from 'react';
import { Card, ListGroup } from 'react-bootstrap';
//Image
import CardImage from '../../../Assets/dist/img/placeholder_card.jpg';
const KitchenSinkExample = () => {
return (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={CardImage} />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
<Card.Body>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
);
}
export default KitchenSinkExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
import React from 'react';
import { Card } from 'react-bootstrap';
const ImageOverlay = () => {
return (
<Card className="bg-dark text-white">
<Card.Img src={CardImage} alt="Card image" />
<Card.ImgOverlay>
<Card.Title className="text-white" >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.Text>Last updated 3 mins ago</Card.Text>
</Card.ImgOverlay>
</Card>
);
}
export default ImageOverlay;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
Card title
This is a wider card with supporting text.
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
const HorizontalCard = () => {
return (
<Card>
<Row className="g-0">
<Col md={4}>
<Card.Img className="img-fluid rounded-start" src={CardImage} alt="Card img" />
</Col>
<Col md={8}>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>This is a wider card with supporting text.</Card.Text>
</Card.Body>
</Col>
</Row>
</Card>
);
}
export default HorizontalCard;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card sizes
Use classes .card-lg, card-sm for sizes.
Card lg
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card lg
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
const CardSizes = () => {
return (
<Row>
<Col xl={4} sm={6} xs={12}>
<Card className="card-lg">
<Card.Body>
<Card.Title>Card lg</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col xl={4} sm={6} xs={12}>
<Card className="card-sm">
<Card.Body>
<Card.Title>Card lg</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardSizes;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Navigation
Add some navigation to a card’s header (or block) with React Bootstrap’s Nav components.
Card with Nav Tabs
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Button, Card, Nav } from 'react-bootstrap';
const CardWithNav = () => {
return (
<Card className="card-sm card-wth-tabs text-center" >
<Card.Header>
<Nav variant="tabs" defaultActiveKey="#first">
<Nav.Item>
<Nav.Link href="#first">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="#link">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="#disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body>
<Card.Title>Card with Nav Tabs</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
}
export default CardWithNav;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card Groups
Use <CardGroup> to render cards as a single, attached element with equal width and height columns. <CardGroup> use display: flex; to achieve their uniform sizing.
Card title
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 title
This card has supporting text below as a natural lead-in to additional content.
Card title
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.
import React from 'react';
import { Card, CardGroup, Nav } from 'react-bootstrap';
//Image
import CardImage from '../../../Assets/dist/img/placeholder_card.jpg';
const CardGroup = () => {
return (
<CardGroup>
<Card>
<Card.Img variant="top" src={CardImage} />
<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.Img variant="top" src={CardImage} />
<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.Img variant="top" src={CardImage} />
<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 CardGroup;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Background and color
You can change a card's appearance by changing their bg props.
Header
Primary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark Card
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
const CardBackgroundColors = () => {
return (
<Row>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="primary" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Primary Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="secondary" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Secondary Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="success" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Success Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="danger" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Danger Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="warning" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Warning Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="info" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Info Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="light-5">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>Light Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card bg="dark" className="text-white">
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title className="text-white">Dark Card</Card.Title>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardBackgroundColors;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Border
Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card's contents as shown below.
Header
Primary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark Card
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
const CardBorder = () => {
return (
<Row>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="primary">
<Card.Header>Header</Card.Header>
<Card.Body className="text-primary" >
<Card.Title className="text-primary" >Primary Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="secondary">
<Card.Header>Header</Card.Header>
<Card.Body className="text-secondary" >
<Card.Title className="text-secondary" >Secondary Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="success">
<Card.Header>Header</Card.Header>
<Card.Body className="text-success" >
<Card.Title className="text-success" >Success Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="danger">
<Card.Header>Header</Card.Header>
<Card.Body className="text-danger" >
<Card.Title className="text-danger" >Danger Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="warning">
<Card.Header>Header</Card.Header>
<Card.Body className="text-warning" >
<Card.Title className="text-warning" >Warning Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="info">
<Card.Header>Header</Card.Header>
<Card.Body className="text-info" >
<Card.Title className="text-info" >Info Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card>
<Card.Header>Header</Card.Header>
<Card.Body className="text-light-80" >
<Card.Title className="text-light-80" >Light Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} sm={6} xs={12}>
<Card border="dark">
<Card.Header>Header</Card.Header>
<Card.Body className="text-dark" >
<Card.Title className="text-dark" >Dark Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardBorder;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with action
Add as many actions in a card header. Add .card-header-action in .card-header. Given actions are for fullscreen, refresh, close, collapse and dropdown.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Button, Card, Col, Collapse, Dropdown, Row } from 'react-bootstrap';
import { ChevronDown, Disc, Maximize, Minimize, MoreHorizontal, X } from 'react-feather';
import { Link } from 'react-router-dom';
const CardWithActions = () => {
const [openCard, setOpenCard] = useState(true);
const [refreshCard, setRefreshCard] = useState(false);
const [maxiMize, setMaxiMize] = useState(false);
const handleRefresh = () => {
setRefreshCard(true)
setTimeout(() => {
setRefreshCard(false)
}, 1500)
}
return (
<Row>
<Col lg={6} sm={12}>
<Card className={classNames("card-refresh", { "fullscreen": maxiMize })}>
<div className={classNames("refresh-container", { "la-animate": refreshCard })}>
<div className="loader-pendulums" />
</div>
<Card.Header className="card-header-action">
<h6>Card Header</h6>
<div className="card-action-wrap">
<Link to="#" className={classNames("btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover", { "collapsed": openCard })} onClick={() => setOpenCard(!openCard)} aria-controls="example-collapse-card">
<span className="icon"><span className="feather-icon">
<ChevronDown />
</span></span>
</Link>
<div className="d-flex dropdown">
<Dropdown className="inline-block" >
<Dropdown.Toggle className="no-caret btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover" id="dropdown-basic1">
<span className="icon"><span className="feather-icon">
<MoreHorizontal />
</span></span>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Reply</Dropdown.Item>
<Dropdown.Item href="#/action-2">Forward</Dropdown.Item>
<Dropdown.Item href="#/action-3">Delete</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
<Link to="#" className="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover refresh" onClick={handleRefresh} >
<span className="icon"><span className="feather-icon">
<Disc />
</span></span>
</Link>
<Link to="#" className="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover full-screen" onClick={() => setMaxiMize(!maxiMize)} >
<span className="icon">
<span className="feather-icon">
<Maximize />
</span>
<span className="feather-icon d-none">
<Minimize />
</span>
</span>
</Link>
<a href="#card" className="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover card-close">
<span className="icon"><span className="feather-icon">
<X />
</span></span>
</a>
</div>
</Card.Header>
<Collapse in={openCard} >
<div id="example-collapse-card" className="card-body">
<h5 className="card-title">Special Title Treatment</h5>
<p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#card" className="btn btn-primary">Go somewhere</a>
</div>
</Collapse>
</Card>
</Col>
<Col lg={6} sm={12}>
<Card>
<Card.Header as="h6" className="card-header-action" >
Card Header
<div className="d-flex align-items-center card-action-wrap">
<Dropdown>
<Dropdown.Toggle size='sm' variant="success" id="dropdown-basic">
Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</Card.Header>
<Card.Body>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardWithActions;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Action in Card Body
Instead of card header you can also add close action inside card-body.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Button, Card, Col, Collapse, Dropdown, Row } from 'react-bootstrap';
import { ChevronDown, Disc, Maximize, Minimize, MoreHorizontal, X } from 'react-feather';
import { Link } from 'react-router-dom';
const RemovableCards = () => {
const [closeCard1, setCloseCard1] = useState(false);
const [closeCard2, setCloseCard2] = useState(false);
return (
<Row>
<Col lg={4} sm={12}>
<Card bsPrefix={closeCard1 && "d-none"} >
<Card.Body>
<Button bsPrefix='btn-close' className="card-close" onClick={() => setCloseCard1(!closeCard1)} >
<span aria-hidden="true">×</span>
</Button>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg={4} sm={12}>
<Card bsPrefix={closeCard2 && "d-none"} className="close-over" >
<Card.Body>
<Button bsPrefix='btn-close' className="card-close" onClick={() => setCloseCard2(!closeCard2)} >
<span aria-hidden="true">×</span>
</Button>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default RemovableCards;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with Indicators
Use badges and badge indicators with cards.
Card Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Card Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Card Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Badge, Button, Card, Col, Row } from 'react-bootstrap'
const CardWithIndicators = () => {
return (
<Row>
<Col lg={4} sm={12}>
<Card className="position-relative">
<Card.Header as="h6" >
Card Header
</Card.Header>
<Card.Body>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
<Badge bg="success" className="badge-indicator badge-indicator-xl position-top-end-overflow" />
</Card>
</Col>
<Col lg={4} sm={12}>
<Card className="position-relative">
<Card.Header as="h6" >
Card Header
</Card.Header>
<Card.Body>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
<Badge bg="success" className="badge-pill position-top-end-overflow">10</Badge>
</Card>
</Col>
<Col lg={4} sm={12}>
<Card className="card-selected">
<Card.Header as="h6">
Card Header
</Card.Header>
<Card.Body>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardWithIndicators;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with table
Use tables inside cards
Card with table
| # | Username | Role |
|---|---|---|
| 1 | Brincker123 | admin |
| 2 | Hay123 | member |
import React from 'react';
import { Card, Table } from 'react-bootstrap';
const CardWithTable = () => {
return (
<Card>
<Card.Header as="h6" > Card with table </Card.Header>
<Card.Body className='p-0' >
<Table className='mb-0' responsive >
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Brincker123</td>
<td><span className="badge badge-danger">admin</span> </td>
</tr>
<tr>
<th scope="row">2</th>
<td>Hay123</td>
<td><span className="badge badge-info">member</span> </td>
</tr>
</tbody>
</Table>
</Card.Body>
</Card>
);
}
export default CardWithTable;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with icons
Use icons with card header.
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Card } from 'react-bootstrap';
const CardWithIcons = () => {
return (
<Card>
<Card.Header as="h6" >
<span className="heading-wth-icon">
<span className="head-icon me-2">
<i className="ri-funds-box-line" />
</span>
Jampack heading
</span>
</Card.Header>
<Card.Body>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
);
}
export default CardWithIcons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with badge
Use badges in card header.
Card with badgebadge
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Badge, Card } from 'react-bootstrap';
const CardWithBadge = () => {
return (
<Card>
<Card.Header as="h6" >
Card with badge
<div className="d-flex">
<Badge bg="info" >badge</Badge>
</div>
</Card.Header>
<Card.Body>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
);
}
export default CardWithBadge;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with headings
Mix and match headings in cards.
import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap';
const CardWithHeadings = () => {
return (
<Row>
<Col lg={6} sm={12}>
<Card>
<Card.Header className="card-header-wth-text card-header-action">
<div>
<h6>Card Header</h6>
<p>With supporting text below as a natural</p>
</div>
<div className="card-action-wrap">
<Link to="#" className="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover full-screen">
<span className="icon">
<span className="feather-icon">
<Maximize />
</span>
<span className="feather-icon d-none">
<Minimize />
</span>
</span>
</Link>
<Link to="#" href="card" className="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover card-close">
<span className="icon">
<span className="feather-icon">
<X />
</span>
</span>
</Link>
</div>
</Card.Header>
<Card.Body>
<Card.Title>Special Title Treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg={4} sm={12}>
<Card>
<Card.Header as="h6">
Card with icon
<small className="text-muted ms-2">sub heading</small>
</Card.Header>
<Card.Body>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardWithHeadings;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with progress bar
Use progress bars with cards.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Card, Col, ProgressBar, Row } from "react-bootstrap";
const CardWithProgressbar = () => {
return (
<Row>
<Col sm={4}>
<Card className="card-wth-progress">
<ProgressBar variant="primary" now={25} className="progress-bar-xs" />
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">
Card Footer
</Card.Footer>
</Card>
</Col>
<Col sm={4}>
<Card className="card-wth-progress">
<ProgressBar variant="warning" now={75} className="progress-bar-xs" />
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">
Card Footer
</Card.Footer>
</Card>
</Col>
<Col sm={4}>
<Card className="card-wth-progress">
<ProgressBar variant="success" now={75} className="progress-bar-xs" />
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">
Card Footer
</Card.Footer>
</Card>
</Col>
</Row>
);
}
export default CardWithProgressbar;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with line
Check the cards with line stylization.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
const CardWithLine = () => {
return (
<Row>
<Col sm={4}>
<Card className="card-wth-line">
<div className="card-line bg-primary" />
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">
Card Footer
</Card.Footer>
</Card>
</Col>
<Col sm={4}>
<Card className="card-wth-line">
<div className="card-line bg-success" />
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">
Card Footer
</Card.Footer>
</Card>
</Col>
<Col sm={4}>
<Card className="card-wth-line">
<div className="card-line bg-warning" />
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">
Card Footer
</Card.Footer>
</Card>
</Col>
</Row>
);
}
export default CardWithLine;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Card with Image Carousel
A card can have carousel within image parent.
Some quick example text to build on the card title and make up the bulk of the card's content.
import React from 'react';
import { Card, Carousel, Col, Row } from 'react-bootstrap';
//Images
import slide1 from '../../../Assets/dist/img/slide1.jpg';
import slide2 from '../../../Assets/dist/img/slide2.jpg';
const CardWithCarousel = () => {
return (
<Row>
<Col sm={4}>
<Card>
<Carousel controls={false} >
<Carousel.Item>
<Card.Img variant="top" src={slide1} alt="Card img cap" />
</Carousel.Item>
<Carousel.Item>
<Card.Img variant="top" src={slide2} alt="Card img cap" />
</Carousel.Item>
</Carousel>
<Card.Body>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default CardWithCarousel;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.