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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Create Dummy component for an element by adding data-mdb-dummy-init attribute 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 data-mdb-dummy-init attribute.

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:
Hipping rareripe sem
Explicitly generated text with 40 characters length:
Gavin horologe ester pellucidity unabata
Text with custom color:
Scripture exitance h
Edit in sandbox 
<dl class="row">
  <dt class="col-sm-6" data-mdb-dummy-init>Implicitly generated text:</dt>
  <dd class="col-sm-6"></dd>

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

  <dt class="col-sm-6">Text with custom color:</dt>
  <dd class="col-sm-6" data-mdb-dummy-init 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

Edit in sandbox 
<img data-mdb-dummy-init data-mdb-dummy-img />

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.

Edit in sandbox 
<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

Edit in sandbox 
<div style="width: 500px">
  <img data-mdb-dummy-init 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="text length value"

Edit in sandbox 
<img data-mdb-dummy-init data-mdb-dummy-img="300" data-mdb-dummy-img-text="Custom text" />
<img data-mdb-dummy-init data-mdb-dummy-img="300" data-mdb-dummy-img-text data-mdb-dummy-text="25" />

Colours

Set the image background color using data-mdb-color and the text color with data-mdb-dummy-text-color. Note that Dummy Image only accepts color values in hexadecimal format (hex).

Edit in sandbox 
<img
  data-mdb-dummy-init
  data-mdb-dummy-img="200"
  data-mdb-dummy-img-text
  data-mdb-dummy-text="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 generate a list with 5 Dummy Text elements.

  • Dodecastylar thoreau
  • Brunetness burletta
  • Unanswering beset fl
  • Botulinuses hipping
  • Predeterminate prein
Edit in sandbox 
<ul data-mdb-dummy-init></ul>

Size

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

  • Decampment milstein untackling
  • Yokel steatite spacious assida
  • Inescapableness shaksperian co
  • Aeaea newsbeat chromic bootie
  • Anatolian bridelike mdoc attra
  • Doom atomize geek gormandising
  • Hipping holism trimming vapori
  • Reamendment trimming sandarac
  • Posttibial scarless brunetness
  • Hulloo gutterlike schumpeter b
    • Leverrier julienne frankfurter
Edit in sandbox 
<ul data-mdb-dummy-init data-mdb-dummy-list="10" data-mdb-dummy-text="30"></ul>

Table

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

Default

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

TrinitrophenylmethylTrinitrophenylmethylTrinitrophenylmethylTrinitrophenylmethylTrinitrophenylmethyl
Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri
Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri
Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri
Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri
Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri Rareripe swagman tri
Edit in sandbox 
<table data-mdb-dummy-init></table>

Size

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

Agribusine
GruesomeneGruesomeneGruesomeneGruesomeneGruesomene
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Zogan balk Zogan balk Zogan balk Zogan balk Zogan balk
Edit in sandbox 
<table data-mdb-dummy-init data-mdb-dummy-table="10,5" data-mdb-dummy-text="10"></table>

Copy

Create a Dummy Copy of any existing 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

Card title

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

Edit in sandbox 
<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" data-mdb-ripple-init>Button</button>
    </div>
  </div>
</div>
<div class="col-6 d-flex flex-column align-items-center">
  <p><strong>Dummy Copy element</strong></p>
  <div data-mdb-dummy-init data-mdb-dummy-copy="#original-element"></div>
</div>

Repeat

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

  • Woman Portrait

    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.

  • Woman Portrait

    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.

  • Woman Portrait

    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.

  • Woman Portrait

    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.

Edit in sandbox 
<ul class="list-unstyled">
  <li data-mdb-dummy-init 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.

  • Preelect strike

    Perugino doom cated bloodwort alfur featherlike sandarac moseley folia monopsony keyman eulis highne

  • Preelect strike

    Perugino doom cated bloodwort alfur featherlike sandarac moseley folia monopsony keyman eulis highne

  • Preelect strike

    Perugino doom cated bloodwort alfur featherlike sandarac moseley folia monopsony keyman eulis highne

  • Preelect strike

    Perugino doom cated bloodwort alfur featherlike sandarac moseley folia monopsony keyman eulis highne

Edit in sandbox 
<ul class="list-unstyled">
  <li data-mdb-dummy-init 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-init data-mdb-dummy-img="120">
      </div>
      <div class="col-10">
        <strong>
          <p data-mdb-dummy-init data-mdb-dummy-text="15"></p>
        </strong>
        <p data-mdb-dummy-init data-mdb-dummy-text="100"></p>
      </div>
    </div>
  </li>
</ul>

Template

Dummy Template can generate a single Dummy element or an entire template based on 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.

Irritate purposed savour kline milstein inescapableness southernwood nomad conveyor preelect unmoldy

Pretaste innutritious flowerage camila flowerage unmoldy unfitly biosphere sandarac dauk anatolian u

Crookesite intercarpCrookesite intercarpCrookesite intercarpCrookesite intercarpCrookesite intercarp
Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid
Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid
Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid
Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid
Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid Contrive alogi resid

Melchizedek alogi pseudopolitical anteroom radioelement bivalvular yeastlike stambul premeditatingly

Diapedesis posttibial yokel marg agana phenylamine reappearance lineamental havel stupefy monopsony

Terminism saffian sc

Diseasing unmoldy salvia predictated intertraffick

Ester pfit Cannibalistically ra
  • Unfitly intercarpell
  • Radioelement azerbai
  • Alloplasmatic cadman
  • Nonexcavation synony
  • Ruralised hysteretic
Edit in sandbox 
<div data-mdb-dummy-init data-mdb-dummy-template></div>

Layouts

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

Dunstable camaraderie gruesomeness rhamnaceous lineamental hulloo anemochorous rhamnaceous norbert s

Altimetrical dubonnet gavin jurisp burletta bloodwort aeaea sanctity synonymized currieries southern

Postfebrile exophtha

Unstunned conveyor currieries leucosis speciously

Azerbaijan Precociousness doom
  • Varietally coleridgi
  • Unstunned biosphere
  • Underyoke manly mose
  • Humorless gavin radi
  • Sandarac fluidally b

Monopsony rubric unaccustomed battue candlenut pfitzner holism rekindle vaporimeter impanel anatolia

Holism actinolitic shaksperian balkanised agribusiness cloverleaf humorless soc hyporight filbert stambul posttibial drawability unaccustomed diseasing boulle altimetrical inescapableness maravedi ungossiping kilopound keyman preinstructional innutritious lineamental typikon sanctity legroom yeastlike spouter keyman mdoc pellucidity kline thoreau immorally speciously nonnobility dimensionless anaglyph gyges biosphere irritate desulfurization fluffier norbert havel immorally bootie trinitrophenyl

...
Precociousness desul

Balkanised overcriti

Irritate actinolitic
...
Precociousness desul

Balkanised overcriti

Irritate actinolitic
...
Precociousness desul

Balkanised overcriti

Irritate actinolitic

Holism actinolitic shaksperian balkanised agribusiness cloverleaf humorless soc hyporight filbert stambul posttibial drawability unaccustomed diseasing boulle altimetrical inescapableness maravedi ungossiping kilopound keyman preinstructional innutritious lineamental typikon sanctity legroom yeastlike spouter keyman mdoc pellucidity kline thoreau immorally speciously nonnobility dimensionless anaglyph gyges biosphere irritate desulfurization fluffier norbert havel immorally bootie trinitrophenyl

Altimetrical innutri
Edit in sandbox 
<div class="container">
  <div data-mdb-dummy-init class="mb-4" data-mdb-dummy-template="h1,p"></div>

  <p data-mdb-dummy-init class="note note-light"></p>

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

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

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

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

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

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

</div>

Dummy - API

Import

Edit in sandbox 
import Dummy from 'mdb-dummy';

Usage

Via data attributes

Using the Datatable plugin doesn't require any additional JavaScript code - simply add data-mdb-dummy-init attribute to base element and use other data attributes to set all options.

Edit in sandbox 
<div data-mdb-dummy-init></div>

Via JavaScript

Edit in sandbox 
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.

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-dummy-text="".

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

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)
Edit in sandbox 
const dummyElement = document.getElementById('dummy-element');
const instance = Dummy.getInstance(dummyElement);
instance.init();