List Group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ListGroup>
<ListGroup.Item className="no-radius-btn">Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
Lables
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span className="badge bg-light border no-radius-btn p-1 mr-1">Default</span>
<span className="badge primaryBg no-radius-btn p-1 mr-1">Primary</span>
<span className="badge badge-secondary no-radius-btn p-1 mr-1">Secondary</span>
<span className="badge badge-success no-radius-btn p-1 mr-1">Success</span>
<span className="badge badge-danger no-radius-btn p-1 mr-1">Danger</span>
<span className="badge badge-warning no-radius-btn p-1 mr-1">Warning</span>
<span className="badge badge-info no-radius-btn p-1 mr-1">Info</span>
<span className="badge badge-light no-radius-btn p-1 mr-1">Light</span>
<span className="badge badge-dark no-radius-btn p-1 mr-1">Dark</span>
Tooltips
<Card>
<Card.Header className="bg-warning text-white">
Tooltips
</Card.Header>
<Card.Body>
<ButtonToolbar>
{['top', 'right', 'bottom', 'left'].map(placement => (
<OverlayTrigger
key={placement}
placement={placement}
overlay={
<Tooltip id={`tooltip-${placement}`}>
Tooltip on <strong>{placement}</strong>.
</Tooltip>
}
>
<Button className="primaryBg mr-2 border-0 no-radius-btn mb-2">Tooltip on {placement}</Button>
</OverlayTrigger>
))}
</ButtonToolbar>
</Card.Body>
</Card>
Popovers
<Card>
<Card.Header className="bg-danger text-white">
Popovers
</Card.Header>
<Card.Body>
<ButtonToolbar>
{['top', 'right', 'bottom', 'left'].map(placement => (
<OverlayTrigger
trigger="click"
key={placement}
placement={placement}
overlay={
<Popover
id={`popover-positioned-${placement}`}
title={`Popover ${placement}`}
>
<strong>Holy guacamole!</strong> Check this info.
</Popover>
}
>
<Button className="bg-transparent border mr-2 text-dark no-radius-btn mb-2">Popover on {placement}</Button>
</OverlayTrigger>
))}
</ButtonToolbar>
</Card.Body>
</Card>