Buttons
Default button style
<div className="card-body">
<Button className="me-2" variant="primary">
Primary
</Button>
<Button className="me-2" variant="secondary">
Secondary
</Button>
<Button className="me-2" variant="success">
Success
</Button>
<Button className="me-2" variant="danger">
Danger
</Button>
<Button className="me-2" variant="warning">
Warning
</Button>
<Button className="me-2" variant="info">
Info
</Button>
<Button className="me-2" variant="light">
Light
</Button>
<Button variant="dark">Dark</Button>
</div>
Buttons With Icon
Button Icon style
<div className="card-body">
<Button className="me-2" variant="primary">
<i className="fa-brands fa-accusoft me-2" />Primary
</Button>
<Button className="me-2" variant="secondary">
<i className="fa-solid fa-table-cells-large me-2"></i>Secondary
</Button>
<Button className="me-2" variant="success">
<i className="fa-solid fa-gear me-2"></i>Success
</Button>
<Button className="me-2" variant="danger">
<i className="fa-solid fa-circle-exclamation me-2"></i>Danger
</Button>
<Button className="me-2" variant="warning">
<i className="fa-solid fa-image me-2"></i> Warning
</Button>
<Button className="me-2" variant="info">
<i className="fa-solid fa-phone-volume me-2"></i>Info
</Button>
<Button className="me-2" variant="light">
<i className="fa-solid fa-lock me-2"></i> Light
</Button>
<Button variant="dark"><i className="fa-solid fa-circle-play me-2"></i>Dark</Button>
</div>
Buttons
Button Light style
<div className="card-body">
<Button className="me-2" variant="primary light">
Primary
</Button>
<Button className="me-2" variant="secondary light">
Secondary
</Button>
<Button className="me-2" variant="success light">
Success
</Button>
<Button className="me-2" variant="danger light">
Danger
</Button>
<Button className="me-2" variant="warning light">
Warning
</Button>
<Button className="me-2" variant="info light">
Info
</Button>
<Button className="me-2" variant="light light">
Light
</Button>
<Button variant="dark light">Dark</Button>
</div>
Outline Buttons
Default outline button style
<div className="card-body">
<Button className="me-2" variant="outline-primary">
Primary
</Button>
<Button className="me-2" variant="outline-secondary">
Secondary
</Button>
<Button className="me-2" variant="outline-success">
Success
</Button>
<Button className="me-2" variant="outline-danger">
Danger
</Button>
<Button className="me-2" variant="outline-warning">
Warning
</Button>
<Button className="me-2" variant="outline-info">
Info
</Button>
<Button className="me-2" variant="outline-light">
Light
</Button>
<Button variant="outline-dark">Dark</Button>
</div>
Button Sizes
add .btn-lg .btn-sm .btn-xs to change the style
<div className="card-body">
<Button className="me-2" variant="primary btn-lg">
Large Button
</Button>
<Button className="me-2" variant="primary">
Default Button
</Button>
<Button className="me-2" variant="primary btn-sm">
Small Button
</Button>
<Button className="me-2" variant="primary btn-xs">
Extra Small Button
</Button>
<Button variant="primary btn-xxs">Extra Small Button</Button>
</div>
Button Sizes Icon
add .btn-lg .btn-sm .btn-xs to change the style
<div className="card-body">
<Button className="me-2" variant="primary btn-icon-lg">
<i className="fa-solid fa-house-chimney" />
</Button>
<Button className="me-2" variant="primary btn-icon-md">
<i className="fa-solid fa-house-chimney" />
</Button>
<Button className="me-2" variant="primary btn-icon-sm">
<i className="fa-solid fa-house-chimney" />
</Button>
<Button className="me-2" variant="primary btn-icon-xs">
<i className="fa-solid fa-house-chimney" />
</Button>
<Button variant="primary btn-icon-xxs"><i className="fa-solid fa-house-chimney" /></Button>
</div>
Outline Button Sizes
add .btn-lg .btn-sm .btn-xs to change the style
<div className="card-body">
<Button className="me-2" variant="outline-primary btn-lg">
Large button
</Button>
<Button className="me-2" variant="outline-primary">
Default button
</Button>
<Button className="me-2" variant="outline-primary btn-md">
Small button
</Button>
<Button className="me-2" variant="outline-primary btn-sm">
Small button
</Button>
<Button variant="outline-primary btn-xs">
Extra small button
</Button>
</div>
Rounded Buttons
add .btn-rounded to change the style
<div className="card-body">
<Card.Title></Card.Title>
<Button className="me-2" variant="primary btn-rounded">
Primary
</Button>
<Button className="me-2" variant="secondary btn-rounded">
Secondary
</Button>
<Button className="me-2" variant="success btn-rounded">
Success
</Button>
<Button className="me-2" variant="danger btn-rounded">
Danger
</Button>
<Button className="me-2" variant="warning btn-rounded">
Warning
</Button>
<Button className="me-2" variant="info btn-rounded">
Info
</Button>
<Button className="me-2" variant="light btn-rounded">
Light
</Button>
<Button variant="dark btn-rounded">Dark</Button>
</div>
Rounded outline Buttons
add .btn-rounded to change the style
<div className="card-body">
<div className="rounded-button">
<Button
className="me-2"
variant="outline-primary btn-rounded"
>
Primary
</Button>
<Button
className="me-2"
variant="outline-secondary btn-rounded"
>
Secondary
</Button>
<Button
className="me-2"
variant="outline-success btn-rounded"
>
Success
</Button>
<Button className="me-2" variant="outline-danger btn-rounded">
Danger
</Button>
<Button
className="me-2"
variant="outline-warning btn-rounded"
>
Warning
</Button>
<Button className="me-2" variant="outline-info btn-rounded">
Info
</Button>
<Button className="me-2" variant="outline-light btn-rounded">
Light
</Button>
<Button variant="outline-dark btn-rounded">Dark</Button>
</div>
</div>
Button Right icons
add .btn-icon-end to change the style
<div className="card-body">
<Button className="me-2" variant="primary">
Add to cart{" "}
<span className="btn-icon-end">
<i className="fa fa-shopping-cart" />
</span>
</Button>
<Button className="me-2" variant="info">
Add to wishlist{" "}
<span className="btn-icon-end">
<i className="fa fa-heart" />
</span>
</Button>
<Button className="me-2" variant="danger">
Remove{" "}
<span className="btn-icon-end">
<i className="far fa-window-close" />
</span>
</Button>
<Button className="me-2" variant="secondary">
Sent message{" "}
<span className="btn-icon-end">
<i className="fa fa-envelope" />
</span>
</Button>
<Button className="me-2" variant="warning">
Add bookmark{" "}
<span className="btn-icon-end">
<i className="fa fa-star" />
</span>
</Button>
<Button variant="success">
Success{" "}
<span className="btn-icon-end">
<i className="fa fa-check" />
</span>
</Button>
</div>
Button Left icons
add .btn-icon-start to change the style
<div className="card-body">
<Button className="me-2" variant="primary btn-rounded">
<span className="btn-icon-start text-primary">
<i className="fa fa-shopping-cart" />
</span>
Buy
</Button>
<Button className="me-2" variant="info btn-rounded">
<span className="btn-icon-start text-info">
<i className="fa fa-plus color-info" />
</span>
Add
</Button>
<Button className="me-2" variant="danger btn-rounded">
<span className="btn-icon-start text-danger">
<i className="fa fa-envelope color-danger" />
</span>
Email
</Button>
<Button className="me-2" variant="secondary btn-rounded">
<span className="btn-icon-start text-secondary">
<i className="fa fa-share-alt color-secondary" />{" "}
</span>
Share
</Button>
<Button className="me-2" variant="warning btn-rounded">
<span className="btn-icon-start text-warning">
<i className="fa fa-download color-warning" />
</span>
Download
</Button>
<Button variant="success btn-rounded">
<span className="btn-icon-start text-success">
<i className="fa fa-upload color-success" />
</span>
Upload
</Button>
</div>
Square Buttons
add .btn-square to change the style
<div className="card-body">
<Button className="me-2" variant="primary btn-square">
Primary
</Button>
<Button className="me-2" variant="secondary btn-square">
Secondary
</Button>
<Button className="me-2" variant="success btn-square">
Success
</Button>
<Button className="me-2" variant="danger btn-square">
Danger
</Button>
<Button className="me-2" variant="warning btn-square">
Warning
</Button>
<Button className="me-2" variant="info btn-square">
Info
</Button>
<Button className="me-2" variant="light btn-square">
Light
</Button>
<Button variant="dark btn-square">Dark</Button>
</div>
Square Outline Buttons
add .btn-square to change the style
<div className="card-body">
<Button className="me-2" variant="outline-primary btn-square">
Primary
</Button>
<Button className="me-2" variant="outline-secondary btn-square">
Secondary
</Button>
<Button className="me-2" variant="outline-success btn-square">
Success
</Button>
<Button className="me-2" variant="outline-danger btn-square">
Danger
</Button>
<Button className="me-2" variant="outline-warning btn-square">
Warning
</Button>
<Button className="me-2" variant="outline-info btn-square">
Info
</Button>
<Button className="me-2" variant="outline-light btn-square">
Light
</Button>
<Button variant="outline-dark btn-square">Dark</Button>
</div>
Rounded Button
add .btn-rounded to change the style
<div className="card-body">
<Button className="me-2" variant="primary btn-rounded">
Primary
</Button>
<Button className="me-2" variant="secondary btn-rounded">
Secondary
</Button>
<Button className="me-2" variant="success btn-rounded">
Success
</Button>
<Button className="me-2" variant="danger btn-rounded">
Danger
</Button>
<Button className="me-2" variant="warning btn-rounded">
Warning
</Button>
<Button className="me-2" variant="info btn-rounded">
Info
</Button>
<Button className="me-2" variant="light btn-rounded">
Light
</Button>
<Button variant="dark btn-rounded">Dark</Button>
</div>
Dropdown Button
Default dropdown button style
<div className="card-body">
<ButtonGroup>
<Dropdown>
<Dropdown.Toggle className="me-2" variant="primary">
Primary
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup>
<Dropdown>
<Dropdown.Toggle className="me-2" variant="secondary">
Secondary
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup>
<Dropdown>
<Dropdown.Toggle className="me-2" variant="success">
Success
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup>
<Dropdown>
<Dropdown.Toggle className="me-2" variant="warning">
Warning
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup>
<Dropdown>
<Dropdown.Toggle variant="danger">Danger</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
<Dropdown.Item to="#">Dropdown link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
Buttons Transparent
Button transparent style
<div className="card-body">
<Button variant="primary tp-btn">Primary</Button>
<Button variant="secondary tp-btn">Secondary</Button>
<Button variant="success tp-btn">Success</Button>
<Button variant="danger tp-btn">Danger</Button>
<Button variant="warning tp-btn">Warning</Button>
<Button variant="info tp-btn">Info</Button>
<Button variant="light tp-btn">Light</Button>
<Button variant="dark tp-btn">Dark</Button>
</div>
Buttons Transparent Light
Button transparent light style
<div className="card-body">
<Button variant="primary tp-btn-light">Primary</Button>
<Button variant="secondary tp-btn-light">Secondary</Button>
<Button variant="success tp-btn-light">Success</Button>
<Button variant="danger tp-btn-light">Danger</Button>
<Button variant="warning tp-btn-light">Warning</Button>
<Button variant="info tp-btn-light">Info</Button>
<Button variant="tp-btn-light text-black">Light</Button>
<Button variant="dark tp-btn-light">Dark</Button>
</div>
Disabled Button
add disabled="disabled" to change the style
<div className="card-body">
<Button
className="me-2"
variant="primary btn-rounded"
disabled="disabled"
>
Primary
</Button>
<Button
className="me-2"
variant="secondary btn-rounded"
disabled="disabled"
>
Secondary
</Button>
<Button
className="me-2"
variant="success btn-rounded"
disabled="disabled"
>
Success
</Button>
<Button
className="me-2"
variant="danger btn-rounded"
disabled="disabled"
>
Danger
</Button>
<Button
className="me-2"
variant="warning btn-rounded"
disabled="disabled"
>
Warning
</Button>
<Button variant="info btn-rounded" disabled="disabled">
Info
</Button>
</div>
Socia icon Buttons with Name
add .btn-facebook, .btn-twitter, .btn-youtube... to change the style
<div className="card-body">
<Button className="me-2" variant="facebook">
Facebook{" "}
<span className="btn-icon-end">
<i className="fab fa-facebook-f" />
</span>
</Button>
<Button className="me-2" variant="twitter">
Twitter{" "}
<span className="btn-icon-end">
<i className="fab fa-twitter" />
</span>
</Button>
<Button className="me-2" variant="youtube">
Youtube{" "}
<span className="btn-icon-end">
<i className="fab fa-youtube" />
</span>
</Button>
<Button className="me-2" variant="instagram">
Instagram{" "}
<span className="btn-icon-end">
<i className="fab fa-instagram" />
</span>
</Button>
<Button className="me-2" variant="pinterest">
Pinterest{" "}
<span className="btn-icon-end">
<i className="fab fa-pinterest-square" />
</span>
</Button>
<Button className="me-2" variant="linkedin">
Linkedin{" "}
<span className="btn-icon-end">
<i className="fab fa-linkedin-in" />
</span>
</Button>
<Button className="me-2" variant="google-plus">
Google +{" "}
<span className="btn-icon-end">
<i className="fab fa-google-plus-g" />
</span>
</Button>
<Button className="me-2" variant="google">
Google{" "}
<span className="btn-icon-end">
<i className="fab fa-google" />
</span>
</Button>
<Button className="me-2" variant="snapchat">
Snapchat{" "}
<span className="btn-icon-end">
<i className="fab fa-snapchat" />
</span>
</Button>
<Button className="me-2" variant="whatsapp">
Whatsapp{" "}
<span className="btn-icon-end">
<i className="fab fa-whatsapp" />
</span>
</Button>
<Button className="me-2" variant="tumblr">
Tumblr{" "}
<span className="btn-icon-end">
<i className="fab fa-tumblr" />
</span>
</Button>
<Button className="me-2" variant="reddit">
Reddit{" "}
<span className="btn-icon-end">
<i className="fab fa-reddit" />
</span>
</Button>
<Button className="me-2" variant="spotify">
Spotify{" "}
<span className="btn-icon-end">
<i className="fab fa-spotify" />
</span>
</Button>
<Button className="me-2" variant="yahoo">
Yahoo{" "}
<span className="btn-icon-end">
<i className="fab fa-yahoo" />
</span>
</Button>
<Button className="me-2" variant="dribbble">
Dribbble{" "}
<span className="btn-icon-end">
<i className="fab fa-dribbble" />
</span>
</Button>
<Button className="me-2" variant="skype">
Skype{" "}
<span className="btn-icon-end">
<i className="fab fa-skype" />
</span>
</Button>
<Button className="me-2" variant="quora">
Quora{" "}
<span className="btn-icon-end">
<i className="fab fa-quora" />
</span>
</Button>
<Button variant="vimeo">
Vimeo{" "}
<span className="btn-icon-end">
<i className="fab fa-vimeo-v" />
</span>
</Button>
</div>