Vue Class Mixin

Vue Class Mixin - Bootstrap 4 & Material Design. Examples & tutorial.

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Class Mixin significantly facilitates the addition of margins or padding to Vue components.

Basice examples

After adding MDB class mixin to any component there is an ability to use margin (m) and padding (p) props short names. This mixin is added by default to the following components:

  • Badge
  • Button
  • Card
  • Col
  • Container
  • Row

Here are some examples:

Button with custom margins and paddings

        
            
      <mdb-btn color="primary" m="4" p="2">m="4" p="2"</mdb-btn>
      <mdb-btn color="primary" m="1" p="4">m="1" p="4"</mdb-btn>
      <mdb-btn color="primary" m="2" p="1">m="2" p="1"</mdb-btn>

Advanced customization

        
            
      <mdb-btn color="primary" m="y4">m="y4"</mdb-btn>
      <mdb-btn color="primary" p="x4">p="x4"</mdb-btn>
      <mdb-btn color="primary" p="t4 r2">p="t4 r2"</mdb-btn>

Class Mixin - API

In this section you will find advanced information about the MDB Class mixin. You will learn which modules are required in this mixin and what are the possibilities of configuring the mixin.

Import statement

        
            
        <script>
          import {
            mdbClassMixin
          } from 'mdbvue';
        </script>

API Reference: Properties

Name Type Default Description Example
m String '' Changes components margin. <mdb-btn m="t2 b4" />
p String '' Changes components padding. <mdb-btn p="t2 b4" />
noMdbClass Boolean false Turns off the mixin. <mdb-btn noMdbClass />