Small box

Bootstrap 5 Small box component

Responsive Small box built with Bootstrap 5. Use bootstrap panels or cards as a box and container for your content.

Basic panel

If we want to get a panel the easiest way is to use the card component:

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Edit in sandbox 
<div class="card w-25">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" data-mdb-ripple-init class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Basic card

We can also use the card with an image for blog posts, user cards, and many more:

Fissure in Sandstone
Card title

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

Button
Edit in sandbox 
<div class="card">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
  <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>
    <a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
  </div>
</div>