Subida del módulo y tema de PrestaShop

This commit is contained in:
Kaloyan
2026-04-09 18:31:51 +02:00
parent 12c253296f
commit 16b3ff9424
39262 changed files with 7418797 additions and 0 deletions

View File

@@ -0,0 +1,109 @@
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Primary
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<br />
<div class="btn-group">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br />
<br />
<div class="btn-group">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton3"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Secondary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton4"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Secondary outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button
class="btn btn-primary dropdown-toggle"
disabled
type="button"
id="dropdownMenuButton5"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Disabled
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary dropdown-toggle"
disabled
type="button"
id="dropdownMenuButton6"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Disabled outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

View File

@@ -0,0 +1,35 @@
<div class="btn-group dropup">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton61"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton61">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropup">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
id="dropdownMenuButton62"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton62">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

View File

@@ -0,0 +1,52 @@
import dropdownsContent from './dropdowns.html'
import dropupContent from './dropup.html'
import variationsContent from './variations.html'
import withButtonSplitContent from './with-button-split.html'
export default {
title: 'UI/Dropdowns',
parameters: {
docs: {
description: {
component: 'Dropdowns are toggleable, contextual overlays for displaying lists of links and more.'
}
}
}
};
export const Basics = () => dropdownsContent;
Basics.parameters = {
docs: {
source: {
code: dropdownsContent
}
}
};
export const Dropup = () => dropupContent;
Dropup.parameters = {
docs: {
source: {
code: dropupContent
}
}
};
export const Variations = () => variationsContent;
Variations.parameters = {
docs: {
source: {
code: variationsContent
}
}
};
export const WithButtonSplit = () => withButtonSplitContent;
WithButtonSplit.parameters = {
docs: {
source: {
code: withButtonSplitContent
}
}
};
WithButtonSplit.storyName = 'With button split';

View File

@@ -0,0 +1,333 @@
<div class="btn-group">
<button
class="btn btn-primary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton7"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="material-icons">ac_unit</i> Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton7">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i> Iceberg Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton8"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="material-icons">ac_unit</i> Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton8">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i> Iceberg Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-primary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton9"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="material-icons">ac_unit</i> Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton9">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i> Iceberg Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-secondary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton10"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton10">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton11"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton11">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton12"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton12">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button
class="btn btn-outline-primary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton13"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
id="dropdownMenuButton14"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton14">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton15"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton15">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton16"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton16">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton17"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton17">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton18"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton18">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button
class="btn btn-success dropdown-toggle"
type="button"
id="dropdownMenuButton19"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton19">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-success dropdown-toggle"
type="button"
id="dropdownMenuButton20"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton20">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-danger dropdown-toggle"
type="button"
id="dropdownMenuButton21"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton21">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-danger dropdown-toggle"
type="button"
id="dropdownMenuButton22"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton22">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-warning dropdown-toggle"
type="button"
id="dropdownMenuButton23"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton23">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-warning dropdown-toggle"
type="button"
id="dropdownMenuButton24"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton24">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

View File

@@ -0,0 +1,493 @@
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Primary outline</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary">
Secondary outline
</button>
<button
type="button"
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
disabled
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary" disabled>
Disabled outline
</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
disabled
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Primary UP</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-primary">
Primary outline UP
</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary">
<i class="material-icons">ac_unit</i> Small group
</button>
<button
type="button"
class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i>
Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
<i class="material-icons">ac_unit</i> Normal group
</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i>
Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-primary">
<i class="material-icons">ac_unit</i> Large group
</button>
<button
type="button"
class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i>
Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-secondary">Large group</button>
<button
type="button"
class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Normal group</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Small group</button>
<button
type="button"
class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">
Small group
</button>
<button
type="button"
class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Normal group</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-primary">
Large group
</button>
<button
type="button"
class="btn btn-lg btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-secondary">
Large group
</button>
<button
type="button"
class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary">Normal group</button>
<button
type="button"
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">
Small group
</button>
<button
type="button"
class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button
type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success">Success</button>
<button
type="button"
class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button
type="button"
class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger">Danger</button>
<button
type="button"
class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button"
class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>