<!-- Primary Button -->
<button
type
=
"button
"
class
=
"btn btn-primary mb-2
"
>
Primary
</button
>
<!-- Secondary Button -->
<button
type
=
"button
"
class
=
"btn btn-secondary mb-2
"
>
Secondary
</button
>
<!-- Success Button -->
<button
type
=
"button
"
class
=
"btn btn-success mb-2
"
>
Success
</button
>
<!-- Danger Button -->
<button
type
=
"button
"
class
=
"btn btn-danger mb-2
"
>
Danger
</button
>
<!-- Warning Button -->
<button
type
=
"button
"
class
=
"btn btn-warning mb-2
"
>
Warning
</button
>
<!-- Info Button -->
<button
type
=
"button
"
class
=
"btn btn-info mb-2
"
>
Info
</button
>
<!-- Light Button -->
<button
type
=
"button
"
class
=
"btn btn-light mb-2
"
>
Light
</button
>
<!-- Dark Button -->
<button
type
=
"button
"
class
=
"btn btn-dark mb-2
"
>
Dark
</button
>
<!-- Link Button -->
<button
type
=
"button
"
class
=
"btn btn-link mb-2
"
>
Link
</button
>
<!-- Primary Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-primary mb-2
"
>
Primary
</button
>
<!-- Secondary Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-secondary mb-2
"
>
Secondary
</button
>
<!-- Success Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-success mb-2
"
>
Success
</button
>
<!-- Danger Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-danger mb-2
"
>
Danger
</button
>
<!-- Warning Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-warning mb-2
"
>
Warning
</button
>
<!-- Info Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-info mb-2
"
>
Info
</button
>
<!-- Light Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-light mb-2
"
>
Light
</button
>
<!-- Dark Button -->
<button
type
=
"button
"
class
=
"btn btn-outline-dark mb-2
"
>
Dark
</button
>
<!-- Primary Button -->
<button
type
=
"button
"
class
=
"btn btn-subtle-primary mb-2
"
>
Primary
</button
>
<!-- Secondary Button -->
<button
type
=
"button
"
class
=
"btn btn-subtle-secondary mb-2
"
>
Secondary
</button
>
<!-- Success Button -->
<button
type
=
"button
"
class
=
"btn btn-subtle-success mb-2
"
>
Success
</button
>
<!-- Danger Button -->
<button
type
=
"button
"
class
=
"btn btn-subtle-danger mb-2
"
>
Danger
</button
>
<!-- Warning Button -->
<button
type
=
"button
"
class
=
"btn btn-subtle-warning mb-2
"
>
Warning
</button
>
<!-- Info Button -->
<button
type
=
"button
"
class
=
"btn btn-subtle-info mb-2
"
>
Info
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary btn-sm
"
>
Small button
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary
"
>
Default button
</button
>
<!--Sizing-->
<button
type
=
"button
"
class
=
"btn btn-primary btn-lg
"
>
Large button
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary btn-sm
"
>
Small button
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary
"
>
Default button
</button
>
<!--Sizing-->
<button
type
=
"button
"
class
=
"btn btn-primary btn-lg
"
>
Large button
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary btn-icon btn-md
"
>
<svg
xmlns
=
"http://www.w3.org/2000/svg
"
width
=
"18
"
height
=
"18
"
viewBox
=
"0 0 24 24
"
fill
=
"none
"
stroke
=
"currentColor
"
stroke-width
=
"2
"
stroke-linecap
=
"round
"
stroke-linejoin
=
"round
"
class
=
"icon icon-tabler icons-tabler-outline
icon-tabler-shopping-bag
"
>
<path
stroke
=
"none
"
d
=
"M0 0h24v24H0z
"
fill
=
"none
"
>
</path
>
<path
d
=
"M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255
8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1
1.977 -2.304z
"
>
</path
>
<path
d
=
"M9 11v-5a3 3 0 0 1 6 0v5
"
>
</path
>
</svg
>
</button
>
<button
type
=
"button
"
class
=
"btn btn-outline-primary btn-icon btn-md
"
>
<svg
xmlns
=
"http://www.w3.org/2000/svg
"
width
=
"18
"
height
=
"18
"
viewBox
=
"0 0 24 24
"
fill
=
"none
"
stroke
=
"currentColor
"
stroke-width
=
"2
"
stroke-linecap
=
"round
"
stroke-linejoin
=
"round
"
class
=
"icon icon-tabler icons-tabler-outline
icon-tabler-shopping-bag
"
>
<path
stroke
=
"none
"
d
=
"M0 0h24v24H0z
"
fill
=
"none
"
>
</path
>
<path
d
=
"M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255
8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1
1.977 -2.304z
"
>
</path
>
<path
d
=
"M9 11v-5a3 3 0 0 1 6 0v5
"
>
</path
>
</svg
>
</button
>
<button
type
=
"button
"
class
=
"btn btn-subtle-primary btn-icon btn-md
"
>
<svg
xmlns
=
"http://www.w3.org/2000/svg
"
width
=
"18
"
height
=
"18
"
viewBox
=
"0 0 24 24
"
fill
=
"none
"
stroke
=
"currentColor
"
stroke-width
=
"2
"
stroke-linecap
=
"round
"
stroke-linejoin
=
"round
"
class
=
"icon icon-tabler icons-tabler-outline
icon-tabler-shopping-bag
"
>
<path
stroke
=
"none
"
d
=
"M0 0h24v24H0z
"
fill
=
"none
"
>
</path
>
<path
d
=
"M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255
8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1
1.977 -2.304z
"
>
</path
>
<path
d
=
"M9 11v-5a3 3 0 0 1 6 0v5
"
>
</path
>
</svg
>
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary btn-icon btn-md rounded-pill
"
>
<svg
xmlns
=
"http://www.w3.org/2000/svg
"
width
=
"18
"
height
=
"18
"
viewBox
=
"0 0 24 24
"
fill
=
"none
"
stroke
=
"currentColor
"
stroke-width
=
"2
"
stroke-linecap
=
"round
"
stroke-linejoin
=
"round
"
class
=
"icon icon-tabler icons-tabler-outline
icon-tabler-shopping-bag
"
>
<path
stroke
=
"none
"
d
=
"M0 0h24v24H0z
"
fill
=
"none
"
>
</path
>
<path
d
=
"M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255
8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1
1.977 -2.304z
"
>
</path
>
<path
d
=
"M9 11v-5a3 3 0 0 1 6 0v5
"
>
</path
>
</svg
>
</button
>
<!-- Primary Button -->
<button
type
=
"button
"
class
=
"btn btn-primary mb-2 rounded-pill
"
>
Primary
</button
>
<!-- Secondary Button -->
<button
type
=
"button
"
class
=
"btn btn-secondary mb-2 rounded-pill
"
>
Secondary
</button
>
<!-- Success Button -->
<button
type
=
"button
"
class
=
"btn btn-success mb-2 rounded-pill
"
>
Success
</button
>
<!-- Danger Button -->
<button
type
=
"button
"
class
=
"btn btn-danger mb-2 rounded-pill
"
>
Danger
</button
>
<!-- Warning Button -->
<button
type
=
"button
"
class
=
"btn btn-warning mb-2 rounded-pill
"
>
Warning
</button
>
<!-- Info Button -->
<button
type
=
"button
"
class
=
"btn btn-info mb-2 rounded-pill
"
>
Info
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary
"
disabled
>
Button
</button
>
<button
type
=
"button
"
class
=
"btn btn-outline-primary
"
disabled
>
Button
</button
>
<button
type
=
"button
"
class
=
"btn btn-subtle-primary
"
disabled
>
Button
</button
>
<button
type
=
"button
"
class
=
"btn btn-primary rounded-pill
"
disabled
>
Button
</button
>
<div
class
=
"d-grid gap-2
"
>
<button
class
=
"btn btn-primary
"
type
=
"button
"
>
Button
</button
>
<button
class
=
"btn btn-primary
"
type
=
"button
"
>
Button
</button
>
</div
>
<!--
Button Group -->
<div class="btn-group" role="group" aria-label="Basic
example">
<button type="button" class="btn
btn-primary">Left</button>
<button type="button" class="btn
btn-primary">Middle</button>
<button type="button" class="btn
btn-primary">Right</button>
</div><div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group"
aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group"
aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group"
aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div><div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group"
aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text"
class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group"
aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text"
class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
<div class="btn-group btn-group-lg me-2" role="group"
aria-label="...">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group mt-2 me-2" role="group"
aria-label="...">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group btn-group-sm mt-2" role="group"
aria-label="...">
<button class="btn btn-secondary" type="button">Left</button>
<button class="btn btn-secondary" type="button">Middle</button>
<button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group" role="group"
aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div><div class="btn-group" role="group"
aria-label="Basic radio toggle button group">
<input type="radio"
class="btn-check" name="btnradio" id="btnradio1" autocomplete="off"
checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio"
class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio"
class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>