Oct 29, 2024 · Oct 14, 2024
diff --git a/packages/docs/components/dropdown.md b/packages/docs/components/dropdown.md
 The best part is you can do this with any button variant, too:

 ::: demo
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
  <CDropdown :color="item" :togglerText="item" variant="btn-group">
    <CDropdownToggle :color="item">{{item}}</CDropdownToggle>
    <CDropdownMenu>
 </template>
 :::
 ```vue
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
  <CDropdown :color="item" :togglerText="item" variant="btn-group">
    <CDropdownToggle :color="item">{{togglerText}}</CDropdownToggle>
    <CDropdownMenu>
 We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

 ::: demo
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
  <CDropdown :color="item" :togglerText="item" variant="btn-group">
    <CButton :color="item">{{ item }}</CButton>
    <CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
 </template>
 :::
 ```vue
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
 <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
  <CDropdown :color="item" :togglerText="item" variant="btn-group">
    <CButton :color="item">{{ item }}</CButton>
    <CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>

 !!!include(./api/dropdown/CDropdownMenu.api.md)!!!

 !!!include(./api/dropdown/CDropdownToggle.api.md)!!!
 !!!include(./api/dropdown/CDropdownToggle.api.md)!!!
Original file line number	Diff line number	Diff line change
Expand Up		@@ -65,7 +65,7 @@ And with `<a>` elements:
		The best part is you can do this with any button variant, too:

		::: demo
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
		<CDropdown :color="item" :togglerText="item" variant="btn-group">
		<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
		<CDropdownMenu>
Expand All		@@ -77,7 +77,7 @@ The best part is you can do this with any button variant, too:
		</template>
		:::
		```vue
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
		<CDropdown :color="item" :togglerText="item" variant="btn-group">
		<CDropdownToggle :color="item">{{togglerText}}</CDropdownToggle>
		<CDropdownMenu>
Expand All		@@ -96,7 +96,7 @@ Similarly, create split button dropdowns with virtually the same markup as singl
		We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

		::: demo
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
		<CDropdown :color="item" :togglerText="item" variant="btn-group">
		<CButton :color="item">{{ item }}</CButton>
		<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
Expand All		@@ -109,7 +109,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
		</template>
		:::
		```vue
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
		<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']" :key="item">
		<CDropdown :color="item" :togglerText="item" variant="btn-group">
		<CButton :color="item">{{ item }}</CButton>
		<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
Expand DownExpand Up		@@ -724,4 +724,4 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:

		!!!include(./api/dropdown/CDropdownMenu.api.md)!!!

		!!!include(./api/dropdown/CDropdownToggle.api.md)!!!
		!!!include(./api/dropdown/CDropdownToggle.api.md)!!!