Cards: Basic

Flexible and extensible content container.

React Bootstrap docs

No image

Card Title

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Basic card without image */}
<Card>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Alternative card styles

Card Title

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

Go somewhere
Card Title

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Alternative card style: no border + shadow */}
<Card border='0' className='shadow'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Alternative card style: gray background */}
<Card bg='secondary'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Light version

Static card

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

Go somewhere
Hover effect

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Static light card */}
<Card className='card-light'>
  <Card.Body>
    <Card.Title as='h5'>Static card</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Light card with hover effect */}
<Card className='card-light card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover effect</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Hover effect

Hover over me!

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

Go somewhere
Hover over me!

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

Go somewhere
Hover over me!

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Hover effect on default card */}
<Card className='card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover over me!</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Hover effect on card with shadow */}
<Card border='0' className='shadow-sm card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover over me!</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Hover effect on card with gray background */}
<Card bg='secondary' className='card-hover'>
  <Card.Body>
    <Card.Title as='h5'>Hover over me!</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Image on top

Card image
Card title

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

Go somewhere
import Link from 'next/link'
import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Image on top */}
<Card style={{maxWidth: '308px'}}>
  <ImageLoader
    src='/images/real-estate/catalog/04.jpg'
    width={306}
    height={200}
    layout='responsive'
    alt='Card image'
    className='card-img-top'
  />
  <Card.Body>
    <Card.Title as='h5'>Card title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Image on bottom

Card title

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

Go somewhere
Card image
import Link from 'next/link'
import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Image on bottom */}
<Card style={{maxWidth: '308px'}}>
  <Card.Body>
    <Card.Title as='h5'>Card title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
  <ImageLoader
    src='/images/real-estate/catalog/01.jpg'
    width={306}
    height={200}
    layout='responsive'
    alt='Card image'
    className='card-img-bottom'
  />
</Card>

Horizontal layout

Card image
Card title

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

Go somewhere
import Link from 'next/link'
import ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Horizontal card layout */}
<Card className='card-horizontal'>
  <div className='card-img-top'>
    <ImageLoader
      src='/images/real-estate/catalog/03.jpg'
      layout='fill'
      objectFit='cover'
      quality={100}
      alt='Card image'
    />
  </div>
  <Card.Body>
    <Card.Title as='h5'>Card title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Text alignment

Card Title

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

Go somewhere
Card Title

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

Go somewhere
Card Title

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'

{/* Left aligned (default) */}
<Card>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Center aligned */}
<Card className='text-center'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Right aligned */}
<Card className='text-end'>
  <Card.Body>
    <Card.Title as='h5'>Card Title</Card.Title>
    <Card.Text className='fs-sm'>Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Navigation: Tabs

Special title treatment

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Nav from 'react-bootstrap/Nav'

{/* Tabs inside card header */}
<Card className='text-center'>
  <Card.Header>
    <Nav variant='tabs' defaultActiveKey='1'>
      <Nav.Item>
        <Nav.Link eventKey='1'>Active</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='2'>Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='3' disabled>Disabled</Nav.Link>
      </Nav.Item>
    </Nav>
  </Card.Header>
  <Card.Body>
    <Card.Title as='h4'>Special title treatment</Card.Title>
    <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Navigation: Pills

Special title treatment

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

Go somewhere
import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Nav from 'react-bootstrap/Nav'

{/* Pills inside card header */}
<Card className='text-center'>
  <Card.Header>
    <Nav variant='pills' defaultActiveKey='1'>
      <Nav.Item>
        <Nav.Link eventKey='1'>Active</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='2'>Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey='3' disabled>Disabled</Nav.Link>
      </Nav.Item>
    </Nav>
  </Card.Header>
  <Card.Body>
    <Card.Title as='h4'>Special title treatment</Card.Title>
    <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

List group inside 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

Card title

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

import Link from 'next/link'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import ListGroup from 'react-bootstrap/ListGroup'

{/* Simple list group inside card */}
<Card>
  <Card.Body>
    <Card.Title as='h4'>Card title</Card.Title>
    <Card.Text className='fs-sm text-muted'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
    </Card.Text>
  </Card.Body>
  <ListGroup as='ul' variant='flush'>
    <ListGroup.Item as='li'>Cras justo odio</ListGroup.Item>
    <ListGroup.Item as='li'>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item as='li'>Vestibulum at eros</ListGroup.Item>
  </ListGroup>
  <Card.Body>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

{/* Actionable list group inside card */}
<Card>
  <Card.Body>
    <Card.Title as='h4'>Card title</Card.Title>
    <Card.Text className='fs-sm text-muted'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
    </Card.Text>
  </Card.Body>
  <ListGroup variant='flush'>
    <ListGroup.Item action href='#link1'>Cras justo odio</ListGroup.Item>
    <ListGroup.Item action href='#link2'>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item action href='#link3'>Vestibulum at eros</ListGroup.Item>
  </ListGroup>
  <Card.Body>
    <Link href='#' passHref>
      <Button size='sm'>Go somewhere</Button>
    </Link>
  </Card.Body>
</Card>

Card styles: Background and 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 within card's body.

Header
Accent card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Dark card title

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

Header
Gradient card title

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

import Card from 'react-bootstrap/Card'

{/* Primary card */}
<Card bg='primary' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Primary card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Accent card */}
<Card bg='accent' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Accent card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Secondary card */}
<Card bg='secondary'>
  <Card.Header>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5'>Secondary card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Success card */}
<Card bg='success' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Success card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Danger card */}
<Card bg='danger' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Danger card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Warning card */}
<Card bg='warning' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Warning card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Info card */}
<Card bg='info' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Info card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Dark card */}
<Card bg='dark' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Dark card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Gradient card */}
<Card bg='gradient' text='white'>
  <Card.Header className='border-light'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-white'>Gradient card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

Card styles: Border and 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 within card's body.

Header
Accent card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Dark card title

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

import Card from 'react-bootstrap/Card'

{/* Primary card */}
<Card border='primary' text='primary'>
  <Card.Header className='border-primary'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-primary'>Primary card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Accent card */}
<Card border='accent' text='accent'>
  <Card.Header className='border-accent'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-accent'>Accent card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Success card */}
<Card border='success' text='success'>
  <Card.Header className='border-success'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-success'>Success card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Danger card */}
<Card border='danger' text='danger'>
  <Card.Header className='border-danger'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-danger'>Danger card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Warning card */}
<Card border='warning' text='warning'>
  <Card.Header className='border-warning'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-warning'>Warning card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Info card */}
<Card border='info' text='info'>
  <Card.Header className='border-info'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-info'>Info card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

{/* Dark card */}
<Card border='dark' text='dark'>
  <Card.Header className='border-dark'>Header</Card.Header>
  <Card.Body>
    <Card.Title as='h5' className='text-dark'>Dark card title</Card.Title>
    <Card.Text className='fs-sm'>
      Some quick example text to build on the card title and make up the bulk of the card&apos;s content within card&apos;s body.
    </Card.Text>
  </Card.Body>
</Card>

Card group

Card image
Dark 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 image
Dark card title

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

Card image
Dark 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 ImageLoader from '../components/ImageLoader'
import Card from 'react-bootstrap/Card'
import CardGroup from 'react-bootstrap/CardGroup'

{/* Card group */}
<CardGroup>

  {/* Card */}
  <Card>
    <ImageLoader
      src='/images/real-estate/catalog/01.jpg'
      width={360}
      height={236}
      layout='responsive'
      alt='Card image'
      className='card-img-top'
    />
    <Card.Body>
      <Card.Title as='h5'>Dark card title</Card.Title>
      <Card.Text className='fs-sm'>
        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 className='fs-xs text-muted'>Last updated 3 mins ago</Card.Footer>
  </Card>

  {/* Card */}
  <Card>
    <ImageLoader
      src='/images/real-estate/catalog/04.jpg'
      width={360}
      height={236}
      layout='responsive'
      alt='Card image'
      className='card-img-top'
    />
    <Card.Body>
      <Card.Title as='h5'>Dark card title</Card.Title>
      <Card.Text className='fs-sm'>
        This card has supporting text below as a natural lead-in to additional content.
      </Card.Text>
    </Card.Body>
    <Card.Footer className='fs-xs text-muted'>Last updated 3 mins ago</Card.Footer>
  </Card>
  
  {/* Card */}
  <Card>
    <ImageLoader
      src='/images/real-estate/catalog/03.jpg'
      width={360}
      height={236}
      layout='responsive'
      alt='Card image'
      className='card-img-top'
    />
    <Card.Body>
      <Card.Title as='h5'>Dark card title</Card.Title>
      <Card.Text className='fs-sm'>
        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 className='fs-xs text-muted'>Last updated 3 mins ago</Card.Footer>
  </Card>
</CardGroup>