diff --git a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
index b0296401..f796ebf1 100644
--- a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
+++ b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx
@@ -9,7 +9,7 @@ import {
 
 export const DropdownResponsiveAlignment2Example = () => {
   return (
-    <CDropdown alignment={{ xs: 'end', lg: 'start' }}>
+    <CDropdown alignment={{ xs: 'end', lg: 'start' }} variant="btn-group">
       <CDropdownToggle color="secondary">
         Right-aligned but left aligned when large screen
       </CDropdownToggle>
diff --git a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
index 298835a3..440577ad 100644
--- a/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
+++ b/packages/docs/src/content/docs/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx
@@ -9,8 +9,10 @@ import {
 
 export const DropdownResponsiveAlignmentExample = () => {
   return (
-    <CDropdown alignment="end">
-      <CDropdownToggle color="secondary">Right-aligned menu example</CDropdownToggle>
+    <CDropdown alignment={{ lg: 'end' }} variant="btn-group">
+      <CDropdownToggle color="secondary">
+        Left-aligned but right aligned when large screen
+      </CDropdownToggle>
       <CDropdownMenu>
         <CDropdownItem href="#">Action</CDropdownItem>
         <CDropdownItem href="#">Another action</CDropdownItem>
diff --git a/packages/docs/src/content/docs/components/dropdown/index.mdx b/packages/docs/src/content/docs/components/dropdown/index.mdx
index 987d9cbd..5bcb9cf8 100644
--- a/packages/docs/src/content/docs/components/dropdown/index.mdx
+++ b/packages/docs/src/content/docs/components/dropdown/index.mdx
@@ -220,15 +220,15 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 
 ### Responsive alignment
 
-If you use responsive alignment, dynamic positioning is disabled.
+If you use responsive alignment, dynamic positioning is disabled — the classes place the menu themselves. Set `variant="btn-group"` so that the dropdown wraps just the toggle; with the default variant it is a full-width block, and the menu aligns to the edge of the container instead of the button.
 
-To align **right** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: end"`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `alignment={{ lg: 'end' }}`, replacing `lg` with any of `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
 
 <Example code={DropdownResponsiveAlignmentExampleRaw} name="DropdownResponsiveAlignmentExample" componentName="React Dropdown">
   <DropdownResponsiveAlignmentExample client:only="react" />
 </Example>
 
-To align **left** the dropdown menu with the given breakpoint or larger, add `aligment="xs|sm|md|lg|xl|xxl: start"`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `alignment={{ xs: 'end', lg: 'start' }}`. Every entry of the map adds its own class, so this one is right aligned by default and left aligned from `lg` up.
 
 <Example code={DropdownResponsiveAlignment2ExampleRaw} name="DropdownResponsiveAlignment2Example" componentName="React Dropdown">
   <DropdownResponsiveAlignment2Example client:only="react" />