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>