Cards

    Bootstrapโ€™s cards provide a flexible and extensible content container with multiple variants and options.

    Basic Example

    Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Content types

    Body

    Use <Card.Body> to pad content inside a <Card>.

    This is some text within a card body.

    Alternatively, you can use this shorthand version for Cards with body only, and no other children

    This is some text within a card body.

    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.Text> outputs <p> tags around the content, so you can use multiple <Card.Text>s to create separate paragraphs.

    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 Link

    List Groups

    Create lists of content in a card with a flush list group.

    Cras justo odio
    Dapibus ac facilisis in
    Vestibulum at eros
    Featured
    Cras justo odio
    Dapibus ac facilisis in
    Vestibulum at eros

    Kitchen Sink

    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

    You may add a header by adding a <Card.Header> component.

    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    A <CardHeader> can be styled by passing a heading element through the <as> prop

    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Quote

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Someone famous in Source Title
    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Images

    Cards include a few options for working with images. Choose from appending โ€œimage capsโ€ at either end of a card, overlaying images with card content, or simply embedding the image in a card.

    Image caps

    Similar to headers and footers, cards can include top and bottom โ€œimage capsโ€โ€”images at the top or bottom of a card.

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Some quick example text to build on the card title and make up the bulk of the card's content.

    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.

    Card image
    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.

    Last updated 3 mins ago

    Add some navigation to a cardโ€™s header (or block) with React Bootstrapโ€™s Nav components.

    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.

    Card Styles

    Background Color

    You can change a card's appearance by changing their <bg>, and <text> props.

    Header
    Primary Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Secondary Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Success Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Danger Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Warning Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Info Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Light Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Dark Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Border Color

    Header
    Primary Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Secondary Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Success Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Danger Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Warning Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Info Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Dark Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Header
    Light Card Title

    Some quick example text to build on the card title and make up the bulk of the card's content.


    Card layout

    Card Groups

    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.

    Grid cards

    Use Row's grid column props to control how many cards to show per row.

    Card title

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    Card title

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    Card title

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    Card title

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    Card Columns

    Card title that wraps to a new line

    This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Someone famous in Source Title
    Card title

    This card has supporting text below as a natural lead-in to additional content.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Someone famous in Source Title
    Card title

    This card has supporting text below as a natural lead-in to additional content.

    Last updated 3 mins ago

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Someone famous in Source Title
    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.

    Last updated 3 mins ago

    API

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bg
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

    Sets card background

    body
    boolean
    false

    When this prop is set, it creates a Card with a Card.Body inside passing the children directly to it

    border
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

    Sets card border color

    text
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted'

    Sets card text color

    bsPrefix
    string
    'card'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-body'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-footer'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix
    string
    'card-header'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <img>

    You can use a custom element type for this component.

    variant
    'top' | 'bottom'

    Defines image position inside the card.

    bsPrefix
    string
    'card-img'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Card.ImgOverlayview source file

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-img-overlay'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <a>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-link'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Card.Subtitleview source file

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <DivStyledAsH6>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-subtitle'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <p>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-text'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Card from 'react-bootstrap/Card'Copy import code for the Card component
    NameTypeDefaultDescription
    as
    elementType
    <DivStyledAsH5>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-title'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import CardGroup from 'react-bootstrap/CardGroup'Copy import code for the CardGroup component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-group'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import CardColumns from 'react-bootstrap/CardColumns'Copy import code for the CardColumns component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-columns'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.