Bootstrap 4 Panels

Bootstrap 4 Panels component

Bootstrap panels are bordered boxes where you can place texts, lists, tables and other content. Panels are similar to cards, but they don't include media.

Basic Bootstrap 4 version

Edit in sandbox 
        
            
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Panel title</h5>
          <p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>

Above is an example template for Panels in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Card title

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

Edit in sandbox 
        
            
      <div class="card">
        <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>
          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Button</button>
        </div>
      </div>