diff --git a/build/build-plugins.js b/build/build-plugins.js
index 7175df4dd562..7fd58bcb647f 100644
--- a/build/build-plugins.js
+++ b/build/build-plugins.js
@@ -35,7 +35,7 @@ const bsPlugins = {
   Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
   Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
   Modal: path.resolve(__dirname, '../js/src/modal.js'),
-  OffCanvas: path.resolve(__dirname, '../js/src/offcanvas.js'),
+  Offcanvas: path.resolve(__dirname, '../js/src/offcanvas.js'),
   Popover: path.resolve(__dirname, '../js/src/popover.js'),
   ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'),
   Tab: path.resolve(__dirname, '../js/src/tab.js'),
@@ -72,7 +72,7 @@ const getConfigByPluginKey = pluginKey => {
     }
   }
 
-  if (pluginKey === 'Alert' || pluginKey === 'Tab' || pluginKey === 'OffCanvas') {
+  if (pluginKey === 'Alert' || pluginKey === 'Tab' || pluginKey === 'Offcanvas') {
     return defaultPluginConfig
   }
 
diff --git a/js/index.esm.js b/js/index.esm.js
index c041beffe255..b95e63fabc11 100644
--- a/js/index.esm.js
+++ b/js/index.esm.js
@@ -11,7 +11,7 @@ import Carousel from './src/carousel'
 import Collapse from './src/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
-import OffCanvas from './src/offcanvas'
+import Offcanvas from './src/offcanvas'
 import Popover from './src/popover'
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
@@ -25,7 +25,7 @@ export {
   Collapse,
   Dropdown,
   Modal,
-  OffCanvas,
+  Offcanvas,
   Popover,
   ScrollSpy,
   Tab,
diff --git a/js/index.umd.js b/js/index.umd.js
index a99a3be896a3..8e52cca0f191 100644
--- a/js/index.umd.js
+++ b/js/index.umd.js
@@ -11,7 +11,7 @@ import Carousel from './src/carousel'
 import Collapse from './src/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
-import OffCanvas from './src/offcanvas'
+import Offcanvas from './src/offcanvas'
 import Popover from './src/popover'
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
@@ -25,7 +25,7 @@ export default {
   Collapse,
   Dropdown,
   Modal,
-  OffCanvas,
+  Offcanvas,
   Popover,
   ScrollSpy,
   Tab,
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index 148f003e9634..f4927aacd68f 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -54,7 +54,7 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
  * ------------------------------------------------------------------------
  */
 
-class OffCanvas extends BaseComponent {
+class Offcanvas extends BaseComponent {
   constructor(element) {
     super(element)
 
@@ -181,7 +181,7 @@ class OffCanvas extends BaseComponent {
 
   static jQueryInterface(config) {
     return this.each(function () {
-      const data = Data.get(this, DATA_KEY) || new OffCanvas(this)
+      const data = Data.get(this, DATA_KEY) || new Offcanvas(this)
 
       if (typeof config === 'string') {
         if (typeof data[config] === 'undefined') {
@@ -224,7 +224,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     return
   }
 
-  const data = Data.get(target, DATA_KEY) || new OffCanvas(target)
+  const data = Data.get(target, DATA_KEY) || new Offcanvas(target)
   data.toggle(this)
 })
 
@@ -234,6 +234,6 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
  * ------------------------------------------------------------------------
  */
 
-defineJQueryPlugin(NAME, OffCanvas)
+defineJQueryPlugin(NAME, Offcanvas)
 
-export default OffCanvas
+export default Offcanvas
diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js
index d07c0c61021f..07a7cf682b33 100644
--- a/js/tests/unit/offcanvas.spec.js
+++ b/js/tests/unit/offcanvas.spec.js
@@ -1,10 +1,10 @@
-import OffCanvas from '../../src/offcanvas'
+import Offcanvas from '../../src/offcanvas'
 import EventHandler from '../../src/dom/event-handler'
 
 /** Test helpers */
 import { clearFixture, getFixture, jQueryMock, createEvent } from '../helpers/fixture'
 
-describe('OffCanvas', () => {
+describe('Offcanvas', () => {
   let fixtureEl
 
   beforeAll(() => {
@@ -18,7 +18,7 @@ describe('OffCanvas', () => {
 
   describe('VERSION', () => {
     it('should return plugin version', () => {
-      expect(OffCanvas.VERSION).toEqual(jasmine.any(String))
+      expect(Offcanvas.VERSION).toEqual(jasmine.any(String))
     })
   })
 
@@ -32,7 +32,7 @@ describe('OffCanvas', () => {
 
       const offCanvasEl = fixtureEl.querySelector('.offcanvas')
       const closeEl = fixtureEl.querySelector('a')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       spyOn(offCanvas, 'hide')
 
@@ -45,7 +45,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('.offcanvas')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
       const keyDownEsc = createEvent('keydown')
       keyDownEsc.key = 'Escape'
 
@@ -60,7 +60,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('.offcanvas')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
       const keydownTab = createEvent('keydown')
       keydownTab.key = 'Tab'
 
@@ -77,7 +77,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('.offcanvas')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       spyOn(offCanvas, 'show')
 
@@ -90,7 +90,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('.show')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       spyOn(offCanvas, 'hide')
 
@@ -107,7 +107,7 @@ describe('OffCanvas', () => {
       spyOn(EventHandler, 'trigger')
 
       const offCanvasEl = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       offCanvas.show()
 
@@ -118,7 +118,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
         expect(offCanvasEl.classList.contains('show')).toEqual(true)
@@ -132,7 +132,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       const expectEnd = () => {
         setTimeout(() => {
@@ -161,7 +161,7 @@ describe('OffCanvas', () => {
       spyOn(EventHandler, 'trigger')
 
       const offCanvasEl = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       offCanvas.hide()
 
@@ -172,7 +172,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
         expect(offCanvasEl.classList.contains('show')).toEqual(false)
@@ -186,7 +186,7 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(offCanvasEl)
+      const offCanvas = new Offcanvas(offCanvasEl)
 
       const expectEnd = () => {
         setTimeout(() => {
@@ -235,11 +235,11 @@ describe('OffCanvas', () => {
 
       const target = fixtureEl.querySelector('a')
 
-      spyOn(OffCanvas.prototype, 'toggle')
+      spyOn(Offcanvas.prototype, 'toggle')
 
       target.click()
 
-      expect(OffCanvas.prototype.toggle).not.toHaveBeenCalled()
+      expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
     })
   })
 
@@ -249,26 +249,26 @@ describe('OffCanvas', () => {
 
       const div = fixtureEl.querySelector('div')
 
-      jQueryMock.fn.offcanvas = OffCanvas.jQueryInterface
+      jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
       jQueryMock.elements = [div]
 
       jQueryMock.fn.offcanvas.call(jQueryMock)
 
-      expect(OffCanvas.getInstance(div)).toBeDefined()
+      expect(Offcanvas.getInstance(div)).toBeDefined()
     })
 
     it('should not re create an offcanvas', () => {
       fixtureEl.innerHTML = '<div></div>'
 
       const div = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(div)
+      const offCanvas = new Offcanvas(div)
 
-      jQueryMock.fn.offcanvas = OffCanvas.jQueryInterface
+      jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
       jQueryMock.elements = [div]
 
       jQueryMock.fn.offcanvas.call(jQueryMock)
 
-      expect(OffCanvas.getInstance(div)).toEqual(offCanvas)
+      expect(Offcanvas.getInstance(div)).toEqual(offCanvas)
     })
 
     it('should throw error on undefined method', () => {
@@ -277,7 +277,7 @@ describe('OffCanvas', () => {
       const div = fixtureEl.querySelector('div')
       const action = 'undefinedMethod'
 
-      jQueryMock.fn.offcanvas = OffCanvas.jQueryInterface
+      jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
       jQueryMock.elements = [div]
 
       try {
@@ -292,13 +292,13 @@ describe('OffCanvas', () => {
 
       const div = fixtureEl.querySelector('div')
 
-      spyOn(OffCanvas.prototype, 'show')
+      spyOn(Offcanvas.prototype, 'show')
 
-      jQueryMock.fn.offcanvas = OffCanvas.jQueryInterface
+      jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
       jQueryMock.elements = [div]
 
       jQueryMock.fn.offcanvas.call(jQueryMock, 'show')
-      expect(OffCanvas.prototype.show).toHaveBeenCalled()
+      expect(Offcanvas.prototype.show).toHaveBeenCalled()
     })
   })
 
@@ -307,10 +307,10 @@ describe('OffCanvas', () => {
       fixtureEl.innerHTML = '<div></div>'
 
       const div = fixtureEl.querySelector('div')
-      const offCanvas = new OffCanvas(div)
+      const offCanvas = new Offcanvas(div)
 
-      expect(OffCanvas.getInstance(div)).toEqual(offCanvas)
-      expect(OffCanvas.getInstance(div)).toBeInstanceOf(OffCanvas)
+      expect(Offcanvas.getInstance(div)).toEqual(offCanvas)
+      expect(Offcanvas.getInstance(div)).toBeInstanceOf(Offcanvas)
     })
 
     it('should return null when there is no offcanvas instance', () => {
@@ -318,7 +318,7 @@ describe('OffCanvas', () => {
 
       const div = fixtureEl.querySelector('div')
 
-      expect(OffCanvas.getInstance(div)).toEqual(null)
+      expect(Offcanvas.getInstance(div)).toEqual(null)
     })
   })
 })