diff --git a/assets/bootstrap/Dialog.less b/assets/bootstrap/Dialog.less
index 5a30ea03..cc201037 100644
--- a/assets/bootstrap/Dialog.less
+++ b/assets/bootstrap/Dialog.less
@@ -34,11 +34,11 @@
   margin: 10px;
 
   // Actual rc-dialog
-  &-section {
+  &-container {
     position: relative;
-    background-color: @modal-section-bg;
-    border: 1px solid @modal-section-fallback-border-color; //old browsers fallback (ie8 etc)
-    border: 1px solid @modal-section-border-color;
+    background-color: @modal-container-bg;
+    border: 1px solid @modal-container-fallback-border-color; //old browsers fallback (ie8 etc)
+    border: 1px solid @modal-container-border-color;
     border-radius: @border-radius-large;
     box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
     background-clip: padding-box;
@@ -47,7 +47,7 @@
   }
 
   // Modal header
-  // Top section of the rc-dialog w/ title and dismiss
+  // Top container of the rc-dialog w/ title and dismiss
   &-header {
     padding: @modal-title-padding;
     border-bottom: 1px solid @modal-header-border-color;
@@ -124,7 +124,7 @@
     width: @modal-md;
     margin: 30px auto;
 
-    &-section {
+    &-container {
       box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
     }
   }
diff --git a/assets/bootstrap/variables.less b/assets/bootstrap/variables.less
index b9b88d43..21f76074 100644
--- a/assets/bootstrap/variables.less
+++ b/assets/bootstrap/variables.less
@@ -596,11 +596,11 @@
 @modal-title-line-height:     @line-height-base;
 
 //** Background color of modal content area
-@modal-section-bg:                             #fff;
+@modal-container-bg:                             #fff;
 //** Modal content border color
-@modal-section-border-color:                   rgba(0,0,0,.2);
+@modal-container-border-color:                   rgba(0,0,0,.2);
 //** Modal content border color **for IE8**
-@modal-section-fallback-border-color:          #999;
+@modal-container-fallback-border-color:          #999;
 
 //** Modal backdrop background color
 @modal-backdrop-bg:           #000;
diff --git a/assets/index/Dialog.less b/assets/index/Dialog.less
index 013bdd54..967b8235 100644
--- a/assets/index/Dialog.less
+++ b/assets/index/Dialog.less
@@ -22,7 +22,7 @@
     font-weight: bold;
   }
 
-  &-section {
+  &-container {
     position: relative;
     background-color: #ffffff;
     border: none;
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index e06678c4..1fbfcd92 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -140,8 +140,8 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
 
   const content = (
     <div
-      className={classNames(`${prefixCls}-section`, modalClassNames?.section)}
-      style={modalStyles?.section}
+      className={classNames(`${prefixCls}-container`, modalClassNames?.container)}
+      style={modalStyles?.container}
     >
       {closerNode}
       {headerNode}
diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
index 8a5b305c..427ee6f6 100644
--- a/src/IDialogPropTypes.tsx
+++ b/src/IDialogPropTypes.tsx
@@ -1,7 +1,7 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
-export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
+export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
 
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index d7886512..8c47cc1e 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`dialog add rootClassName and rootStyle should render correct 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section"
+          class="rc-dialog-container"
         >
           <button
             aria-label="Close"
@@ -71,7 +71,7 @@ exports[`dialog should render correct 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section"
+          class="rc-dialog-container"
         >
           <button
             aria-label="Close"
@@ -129,7 +129,7 @@ exports[`dialog should support classNames 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section custom-section"
+          class="rc-dialog-container custom-container"
         >
           <button
             aria-label="Close"
@@ -194,7 +194,7 @@ exports[`dialog should support styles 1`] = `
         tabindex="0"
       >
         <div
-          class="rc-dialog-section"
+          class="rc-dialog-container"
           style="background: orange;"
         >
           <button
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index e6c075ea..a492f2bc 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -389,7 +389,7 @@ describe('dialog', () => {
         }
       />,
     );
-    expect(document.querySelector('.rc-dialog-section')).toHaveStyle('background: #1890ff');
+    expect(document.querySelector('.rc-dialog-container')).toHaveStyle('background: #1890ff');
   });
 
   describe('focusTriggerAfterClose', () => {
@@ -597,7 +597,7 @@ describe('dialog', () => {
           footer: 'custom-footer',
           mask: 'custom-mask',
           wrapper: 'custom-wrapper',
-          section: 'custom-section',
+          container: 'custom-container',
         }}
         style={{ width: 600 }}
         height={903}
@@ -611,7 +611,7 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog-header').className).toContain('custom-header');
     expect(document.querySelector('.rc-dialog-footer').className).toContain('custom-footer');
     expect(document.querySelector('.rc-dialog-mask').className).toContain('custom-mask');
-    expect(document.querySelector('.rc-dialog-section').className).toContain('custom-section');
+    expect(document.querySelector('.rc-dialog-container').className).toContain('custom-container');
   });
 
   it('should support styles', () => {
@@ -626,7 +626,7 @@ describe('dialog', () => {
           footer: { background: 'blue' },
           mask: { background: 'yellow' },
           wrapper: { background: 'pink' },
-          section: { background: 'orange' },
+          container: { background: 'orange' },
           title: { background: 'orange' },
         }}
         style={{ width: 600 }}
@@ -641,7 +641,7 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog-header')).toHaveStyle('background: red');
     expect(document.querySelector('.rc-dialog-footer')).toHaveStyle('background: blue');
     expect(document.querySelector('.rc-dialog-mask')).toHaveStyle('background: yellow');
-    expect(document.querySelector('.rc-dialog-section')).toHaveStyle('background: orange');
+    expect(document.querySelector('.rc-dialog-container')).toHaveStyle('background: orange');
     expect(document.querySelector('.rc-dialog-title')).toHaveStyle('background: orange');
   });
 
diff --git a/tests/portal.spec.tsx b/tests/portal.spec.tsx
index cdae89c8..b5d4e7fb 100644
--- a/tests/portal.spec.tsx
+++ b/tests/portal.spec.tsx
@@ -30,9 +30,9 @@ describe('Dialog.Portal', () => {
 
     jest.runAllTimers();
 
-    fireEvent.mouseDown(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseDown(document.querySelector('.rc-dialog-container'));
     fireEvent.click(document.querySelector('.rc-select-item-option-content'));
-    fireEvent.mouseUp(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseUp(document.querySelector('.rc-dialog-container'));
     expect(onClose).not.toHaveBeenCalled();
   });
 
@@ -47,7 +47,7 @@ describe('Dialog.Portal', () => {
 
     jest.runAllTimers();
 
-    fireEvent.mouseDown(document.querySelector('.rc-dialog-section'));
+    fireEvent.mouseDown(document.querySelector('.rc-dialog-container'));
     fireEvent.mouseUp(document.querySelector('.rc-dialog-wrap'));
     expect(onClose).not.toHaveBeenCalled();
   });