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
Text
Create Dummy Text by adding variant='text' to MDBDummy element. To create text with custom length add length property. Change text color with color property.
- Implicitly generated text:
- Explicitly generated text with 40 characters length:
- Text with custom color:
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<dl className="row">
<dt className="col-sm-6">Implicitly generated text:</dt>
<MDBDummy className='col-sm-6' />
<dt className="col-sm-6">Explicitly generated text with 40 characters length:</dt>
<MDBDummy className='col-sm-6' length={40} />
<dt className="col-sm-6">Text with custom color:</dt>
<MDBDummy className='col-sm-6' color='#FF0000' />
</dl>
};
}
Image
Create Dummy Image
Default
By default Dummy Image is created with size 150x150px and grey background
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='img' length={0} />
);
}
Size
Change Dummy Image size with imgSize property.
Height value is optional, when omitted square image will be created.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='img' imgSize={[400, 300]} length={0} />
);
}
Make Dummy Image inherit full size of its container with
containerFit={true}.
Note: It will only work with container having explicitly set width and height.
Setting containerFit={true} will create square image with width and
height of its container width
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='img' containerFit={true} length={0} />
);
}
Text
Add text to Dummy Image with customText property. 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 length property
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<>
<MDBDummy variant='img' imgSize={300} customText='Custom text' />
<MDBDummy variant='img' imgSize={300} length={30} />
</>
);
}
Colours
Set image background color with bgColor property and text color with
color property. Dummy Image only accepts the color values in hex
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='img' imgSize={200} length={5} bgColor='#FF5733' color='#FFF' />
);
}
List
Create Dummy List by adding variant='list' to MDBDummy element.
Default
By default Dummy List will create list with 5 Dummy Text elements
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='list' />
);
}
Size
Change Dummy List length with listLength property and length of
Dummy Text element with length property.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='list' length={10} listLength={10} />
);
}
Table
Create Dummy Table by adding variant='table' to MDBDummy element.
Default
By default Dummy Table will create table with 5 rows and 5 columns.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='table' />
);
}
Size
Change Dummy Table rows and columns size with
tableSize={rows, columns}. Change length
of default Dummy Text with length property.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='table' tableSize={[10, 5]} length={10} />
);
}
Copy
Create a Dummy Copy of any existing element with
variant='copy' and putting element that you want to copy inside MDBDummy tags.
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
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<div className='col-6 d-flex flex-column align-items-center'>
<p>
<strong>Original element</strong>
</p>
<MDBDummy variant='copy'>
<div className='card'>
<div className='card-body'>
<h5 className='card-title'>Card title</h5>
<p className='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' className='btn btn-primary'>
Button
</button>
</div>
</div>
</MDBDummy>
</div>
);
}
Repeat
Dummy Repeat will repeat element on which
variant='copy' with repeat property 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.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<ul className='list-unstyled'>
<MDBDummy variant='copy' repeat={3}>
<li>
<div className='row mb-4'>
<div className='col-2'>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp'
className='img-fluid shadow-1-strong rounded'
alt='Woman Portrait'
/>
</div>
<div className='col-10'>
<p className='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>
</MDBDummy>
</ul>
);
}
Any content inside Dummy Repeat can be created from Dummy elements.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<ul className='list-unstyled'>
<MDBDummy variant='copy' repeat={3}>
<li>
<div className='row mb-4'>
<div className='col-2'>
<MDBDummy className='img-fluid shadow-1-strong rounded' variant='img' imgSize={120} />
</div>
<div className='col-10'>
<strong>
<MDBDummy />
</strong>
<MDBDummy length={100} />
</div>
</div>
</li>
</MDBDummy>
</ul>
);
}
Template
Dummy Template will create a whole template by adding variant='template' to MDBDummy element.
Default
By default Dummy Template will create a template of
h1,p,table,h2,p,form,blockquote,img,ul tags.
import { MDBDummy } from 'mdb-react-dummy';
export default function App() {
return (
<MDBDummy variant='template' />
);
}
Dummy - API
Import
import { MDBDummy } from 'mdb-react-dummy';
Properties
MDBDummy
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
bgColor
|
string | '#E6E6E6' |
Adds a custom background color to the MDBDummy component. |
<MDBDummy variant='img' bgColor='#FF0000' />
|
className
|
string | '' |
Adds a custom class to the MDBDummy component. |
<MDBDummy className='bg-secondary' />
|
color
|
string | '' |
Adds a custom text color to the MDBDummy component. |
<MDBDummy color='#FF0000' />
|
containerFit
|
boolean | false |
When the property is true MDBDummy with variant img will fit container size. |
<MDBDummy varaint='img' containerFit={true} />
|
customText
|
string | '' |
Adds a custom text to the MDBDummy component. |
<MDBDummy customText='custom text' />
|
imgSize
|
[number, number] | number | 150 |
Changes img size in MDBDummy component. |
<MDBDummy variant='img' imgSize={200} />
|
length
|
number | 15 |
Changes length of the text in MDBDummy component. |
<MDBDummy length={30} />
|
listLength
|
number | 5 |
Changes length of the list in MDBDummy component. |
<MDBDummy listLength={10} />
|
repeat
|
number | 1 |
Determines number of repetitions with variant copy. |
<MDBDummy repeat={10} variant='copy' />
|
tableSize
|
[number, number] | [5, 5] |
Changes rows and columns in MDBDummy component. |
<MDBDummy variant='table' tableSize={[10, 10]} />
|
variant
|
'text' | 'img' | 'list' | 'table' | 'copy' | 'template' | 'text' |
Changes variant of MDBDummy component. |
<MDBDummy variant='img' />
|