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.

    Press esc to disable tab trapping

    Content types

    Body

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

    This is some text within a card body.
    Press esc to disable tab trapping

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

    This is some text within a card body.
    Press esc to disable tab trapping

    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 Link
    Press esc to disable tab trapping

    List Groups

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

    Cras justo odio
    Dapibus ac facilisis in
    Vestibulum at eros
    Press esc to disable tab trapping
    Featured
    Cras justo odio
    Dapibus ac facilisis in
    Vestibulum at eros
    Press esc to disable tab trapping

    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
    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping
    Quote

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

    Someone famous in Source Title
    Press esc to disable tab trapping
    Featured
    Special title treatment

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

    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping

    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

    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping
    Special title treatment

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

    Press esc to disable tab trapping

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


    Press esc to disable tab trapping

    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.


    Press esc to disable tab trapping

    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.

    Press esc to disable tab trapping

    Card Deck

    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.

    Press esc to disable tab trapping

    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

    Press esc to disable tab trapping

    API

    import Card from 'react-bootstrap/Card'
    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'
    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'
    NameTypeDefaultDescription
    as
    elementType
    <img>

    You can use a custom element type for this component.

    variant
    'top' | 'bottom'
    null

    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'
    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 CardDeck from 'react-bootstrap/CardDeck'
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'card-deck'

    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'
    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.