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>

results matching ""

    No results matching ""