Dummy

Bootstrap 5 Dummy plugin

Dummy plugin creates placeholder content for accelerated building and testing your frontend templates.

Responsive Dummy plugin built with the latest Bootstrap 5. Plenty of implementation examples such as images, lists, tables, and much more.

Note: Read the API tab to find all available options and advanced customization

Create Dummy component for an element by adding class dummy to it. Depending on the base element, different Dummies will be created. For most of the HTML tags default Dummy is Text.

To explicitly create specific Dummy add proper data-mdb- attribute to element with dummy class

Text

Create Dummy Text by adding data-mdb-dummy-text to element. To create text with custom length add value of desired length to the attribute. Change text color with data-mdb-text-color attribute.

Implicitly generated text:
Explicitly generated text with 40 characters length:
Text with custom color:

Show code Edit in sandbox

HTML

        
            
          <dl class="row">
            <dt class="col-sm-6">Implicitly generated text:</dt>
            <dd class="col-sm-6 dummy"></dd>

            <dt class="col-sm-6">Explicitly generated text with 40 characters length:</dt>
            <dd class="col-sm-6 dummy" data-mdb-dummy-text="40"></dd>

            <dt class="col-sm-6">Text with custom color:</dt>
            <dd class="col-sm-6 dummy" data-mdb-dummy-text-color="red"></dd>
          </dl>

Image

Create Dummy Image by adding data-mdb-dummy-img} to element.

Default

By default Dummy Image is created with size 150x150px and grey background

Show code Edit in sandbox

HTML

        
            
            <img class="dummy" />

Size

Change Dummy Image size with data-mdb-dummy-img="width value, height value". Height value is optional, when omitted square image will be created.

Show code Edit in sandbox

HTML

        
            
            <img class="dummy" data-mdb-dummy-img="400,300" />

Make Dummy Image inherit full size of its container with data-mdb-dummy-img="100%,100%".

Note: It will only work with container having explicitly set width and height.

Setting data-mdb-dummy-img="100%" will create square image with width and height of its container width

Show code Edit in sandbox

HTML

        
            
            <div style="width: 500px">
              <img class="dummy" data-mdb-dummy-img="100%" />
            </div>

Text

Add text to Dummy Image with data-mdb-dummy-img-text attribute. Pass any value to attrtibute to set your own text or leave empty to create Dummy Text inside image. Set length of Dummy Text with data-mdb-dummy-text-length="text length value"

Show code Edit in sandbox

HTML

        
            
            <img class="dummy" data-mdb-dummy-img="300" data-mdb-dummy-img-text="Custom text" />
            <img class="dummy" data-mdb-dummy-img="300" data-mdb-dummy-img-text data-mdb-dummy-text-length="30" />

Colours

Set image background color with data-mdb-color and text color with data-mdb-dummy-text-color. Dummy Image only accepts the color values in hex

Show code Edit in sandbox

HTML

        
            
            <img 
              class="dummy"
              data-mdb-dummy-img="200"
              data-mdb-dummy-img-text
              data-mdb-dummy-text-length="5"
              data-mdb-color="#FF5733"
              data-mdb-dummy-text-color="#FFF"
            />

List

Create Dummy List by adding data-mdb-dummy-list to ul or ol element.

Default

By default Dummy List will create list with 5 Dummy Text elements

Show code Edit in sandbox

HTML

        
            
            <ul class="dummy"></ul>

Size

Change Dummy List length with data-mdb-dummy-list="length value" and length of Dummy Text element with data-mdb-text-length="text length value".

Show code Edit in sandbox

HTML

        
            
            <ul class="dummy" data-mdb-dummy-list="10" data-mdb-text-length="30"></ul>

Table

Create Dummy Table by adding data-mdb-dummy-table to table element.

Default

By default Dummy Table will create table with 5 rows and 5 columns.

Show code Edit in sandbox

HTML

        
            
            <table class='dummy'></table>

Size

Change Dummy Table rows and columns size with data-mdb-dummy-table="rows length value, columns length value". Change length of default Dummy Text with data-mdb-text-length="text length value"

Show code Edit in sandbox

HTML

        
            
            <table class='dummy' data-mdb-dummy-table="10,5" data-mdb-text-length="10"></table>

Copy

Create a Dummy Copy of any existign element with data-mdb-dummy-copy="existing element selector"

Original element

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Dummy Copy element

Show code Edit in sandbox

HTML

        
            
          <div class="col-6 d-flex flex-column align-items-center">
            <p><strong>Original element</strong></p>
            <div class="card" id="original-element">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  Some quick example text to build on the card title and make up the bulk of the
                  card's content.
                </p>
                <button type="button" class="btn btn-primary">Button</button>
              </div>
            </div>
          </div>
          <div class="col-6 d-flex flex-column align-items-center">
            <p><strong>Dummy Copy element</strong></p>
            <div class="dummy" data-mdb-dummy-copy="#original-element"></div>
          </div>

Repeat

Dummy Repeat will repeat element on which data-mdb-dummy-repeat="number of repetitions" was invoked.

Jane Smith

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo voluptatem tenetur? Consequatur totam maiores eum.

Show code Edit in sandbox

HTML

        
            
          <ul class="list-unstyled">
            <li class="dummy" data-mdb-dummy-repeat="3">
              <div class="row mb-4">
                <div class="col-2">
                  <img 
                    src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp"
                    class="img-fluid shadow-1-strong rounded" 
                    alt="Woman Portrait">
                </div>

                <div class="col-10">
                  <p class="mb-2"><strong>Jane Smith</strong></p>
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis
                    est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo
                    voluptatem tenetur? Consequatur totam maiores eum.
                  </p>
                </div>
              </div>
            </li>
          </ul>

Any content inside Dummy Repeat can be created from Dummy elements.

Show code Edit in sandbox

HTML

        
            
          <ul class="list-unstyled">
            <li class="dummy" data-mdb-dummy-repeat="3">
              <div class="row mb-4">
                <div class="col-2">
                  <img class="dummy img-fluid shadow-1-strong rounded" data-mdb-dummy-img="120">
                </div>
                <div class="col-10">
                  <strong>
                    <p class="dummy" data-mdb-dummy-text="15"></p>
                  </strong>
                  <p class="dummy" data-mdb-dummy-text="100"></p>
                </div>
              </div>
            </li>
          </ul>

Template

Dummy Template will create single Dummy element or a whole template from the tag elements passed as string into data-mdb-dummy-template.

Default

By default Dummy Template will create a template of h1,p,table,h2,p,form,blockquote,img,ul tags.

Show code Edit in sandbox

HTML

        
            
            <div class="dummy" data-mdb-dummy-template></div>

Layouts

Combine Dummy Template with other Dummy elements and MDBootstrap components to create layouts in no time!

Show code Edit in sandbox

HTML

        
            
            <div class="container">
              <div class="dummy mb-4" data-mdb-dummy-template="h1,p"></div>

              <p class="dummy note note-light"></p>

              <img class="dummy mb-4" data-mdb-dummy-img="100%,500" data-mdb-dummy-img-text />

              <div class="dummy mb-4" data-mdb-dummy-template="blockquote,ul,h2"></div>

              <p class="dummy mb-4" id="dummy-text" data-mdb-dummy-text="500"></p>

              <div class="d-flex justify-content-between mb-4">
                <div class="dummy card col-3" data-mdb-dummy-repeat="2">
                  <img class="card-img-top dummy" data-mdb-dummy-img="100%" alt="..." />
                  <div class="card-body">
                    <h5 class="dummy card-title"></h5>
                    <p class="dummy card-text"></p>
                    <a href="#!" class="dummy btn btn-primary"></a>
                  </div>
                </div>
              </div>

              <p class="dummy" data-mdb-dummy-copy="#dummy-text"></p>

              <div class="d-flex align-items-center">
                <img class="dummy col-6" data-mdb-dummy-img="100%" data-mdb-dummy-img-text data-mdb-dummy-img-text-length="10">
                <div class="dummy col-6" data-mdb-dummy-template="form"></div>
              </div>

            </div>

Dummy - API

Usage

Add dummy class to any of HTML tags to initiate Dummy on this element. If no options are passed, Dummy element based on tag element will be created.

Via data attributes

Show code Edit in sandbox

HTML

        
            
        <div class="dummy"></div>

Via JavaScript

Show code Edit in sandbox

JavaScript

        
            
        const dummyElement = document.getElementById('dummy-element');
        new Dummy(dummyElement);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Show code Edit in sandbox

jQuery

        
            
        $(document).ready(() => { 
          $('#dummy-element').dummy();
        });

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-dummy-text="20". Each option can be passed with value or null. Passing null will cause element to use default options.

Name	Type	Default	Description
`dummyText`	Null / Number	`20`	Creates Dummy Text of given length on element.
`dummyImg`	Null / String	`'150'`	Creates Dummy Img of given size.
`dummyList`	Null / Number	`5`	Creates Dummy List with given number of list elements
`dummyTable`	Null / String	`'5,5'`	Creates Dummy Table with given rows and cols number
`dummyCopy`	Null / String		Creates copy of element based on given selector
`dummyRepeat`	Null / Number	`1`	Creates given number of copies of element to which dummyRepeat was attached. Allows to repeat elements created by other Dummy methods.
`dummyTemplate`	Null / String	`'h1,p,table,h2,p, form,blockquote,img,ul'`	Creates template from given string of HTML tag elements
`dummyColor`	Null / String		Defines color of Dummy Image background. Allows colours only in `hex` format
`dummyTextColor`	Null / String		Defines color of Dummy Text
`dummyImgText`	Null / String		Defines text of Dummy Text inside Dummy Image
`dummyTextLength`	Null / String		Defines length of the text in text based Dummy elements

Methods

Name	Parameters	Description	Example
`dispose`		Disposes a Dummy instance.	`instance.dispose()`
`init`		Initializes dummy for dynamically added element.	`instance.init()`
`getInstance`	element	Static method which allows to get the dummy instance associated with a DOM element.	`Dummy.getInstance(dummyElement)`

Show code Edit in sandbox

JavaScript

        
            
        const dummyElement = document.getElementById('dummy-element');
        const instance = Dummy.getInstance(dummyElement);
        instance.init();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Show code Edit in sandbox

JavaScript

        
            
        import Dummy from 'mdb-dummy';