Default
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
Outline
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4" role="group">
<button id="btndefault" type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
<div class="dropdown-menu" aria-labelledby="btndefault">
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-home-fill-1 mr-1"></i>Action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-gear-fill mr-1"></i>Another action</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-bell-fill-2 mr-1"></i>Something else here</a>
<a href="javascript:void(0);" class="dropdown-item"><i class="flaticon-dots mr-1"></i>Separated link</a>
</div>
</div>
Split
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-success">Action</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-warning">Action</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-dark">Action</button>
<button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
Split Outline
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-primary">Action</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-info">Action</button>
<button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-success">Action</button>
<button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-warning">Action</button>
<button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-danger">Action</button>
<button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group mb-2 me-4">
<button type="button" class="btn btn-outline-dark">Action</button>
<button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
<span class="visually-hidden ">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Action</a>
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
</div>
</div>
Dropup
Use .dropup class to open dropdown menu in upward direction.
Dropright
Use .dropend class to open dropdown menu in right direction.
Dropleft
Use .dropstart class to open dropdown menu in left direction.
Small Button
Use .btn-sm class to make small button dropdown menu.
Large Button
Use .btn-lg class to make large button dropdown menu.
Grouped Dropdown Buttons
Use .btn-group class to make group buttons.
<div class="n-chk"> <label class="new-control new-radio square-radio new-radio-text radio-primary"> <input type="radio" class="new-control-input" name="custom-radio-6"> <span class="new-control-indicator"></span><span class="new-radio-content">Primary</span> </label> </div>
Custom Dropdown
Use .custom-dropdown class on div tag of a dropdown .
<div class="n-chk"> <label class="new-control new-radio square-radio new-radio-text radio-primary"> <input type="radio" class="new-control-input" name="custom-radio-6"> <span class="new-control-indicator"></span><span class="new-radio-content">Primary</span> </label> </div>
Copyright © 2022 DesignReset, All rights reserved.
Coded with