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:
- Explicitly generated text with 40 characters length:
- Text with custom color:
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
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.
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
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"
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).
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.
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".
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.
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"
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
Repeat
Dummy Repeat will duplicate the element on which data-mdb-dummy-repeat="number of repetitions" was invoked.
-
.webp)
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.
Any content inside Dummy Repeat can be created from Dummy elements.
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.
Layouts
Combine Dummy Template with other Dummy elements and MDBootstrap components to create layouts in no time!