Pane

Bootstrap Pane

The Bootstrap 5 Pane component is used to display information in the form of a card. It's commonly found in chat UIs and other similar applications.

Pane with Location Marker

The 'Warren Briggs' location is described in the Contrast Bootstrap 5 Pane below. To access Contrast Bootstrap's predefined pane styling, use the pane class, and the icon element to include icons in your pane.

Warren Briggs

Australia

300m

HTML

html

<div class="pane">
  <img
    class="pane-img pane-md"
    src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170"
  />
  <div class="ms-3">
    <div class="panel-title">Warren Briggs</div>
    <p class="panel-text panel-text">Australia</p>
  </div>
  <p class="ms-auto mb-0 text-danger">300m <i class="fas fa-map-marker-alt"></i></p>
</div>

Pane with Dropdown

In this section of the tutorial we use dropdowns in our pane, to understand the Contrast Bootstrap dropdowns, go here.

Warren Briggs

Breafast

HTML

html

<div class="pane">
  <img
    class="pane-img pane-md"
    src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170"
  />
  <div class="ms-3">
    <div class="panel-title">Warren Briggs</div>
    <p class="panel-text panel-text">Breakfast</p>
  </div>

  <div class="dropdown ms-auto">
    <button
      class="btn btn-white btn-flat dropdown-toggle dropdown-toggle-false me-0"
      type="button"
      id="dropdownMenuButton"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li>
        <a class="dropdown-item disabled" href="#">Edit Profile</a>
      </li>
      <li><a class="dropdown-divider" href="#"></a></li>
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Action 2</a></li>
    </ul>
  </div>
</div>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Panel

Progress