❤
npm
Sign UpSign In

bootstrap-media-object

1.0.0 • Public • Published

Responsive Media objects built with the latest Bootstrap 5. Dedicated for highly repetitive components like blog comments, tweets, and the like.

Check out Bootstrap Media Object Documentation for detailed instructions & even more examples.

Basic example

Bootstrap 5 Media Object

<!-- Media object -->
<div class="d-flex">
  <!-- Image -->
  <img
    src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
    alt="John Doe"
    class="me-3 rounded-circle"
    style="width: 60px; height: 60px;"
  />
  <!-- Body -->
  <div>
    <h5 class="fw-bold">
      John Doe
      <small class="text-muted">Posted on February 19, 2021</small>
    </h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>
<!-- Media object -->

How to use?

  1. Download MDB 5 - free UI KIT

  2. Choose your favourite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples

Bootstrap Media Object Nesting: Bootstrap 5 Media Object

More extended Bootstrap documentation

Readme

Keywords

Package Sidebar

Install

npm i bootstrap-media-object

Repository

github.com/mdbootstrap/bootstrap-media-object

Homepage

mdbootstrap.com/docs/standard/extended/media-object/

Weekly Downloads

58

Version

1.0.0

License

ISC

Unpacked Size

6.05 MB

Total Files

354

Last publish

Collaborators

  • mdbootstrap
Try on RunKit
Report malware