Panel

Bootstrap Panels are the flexible and extensible content containers with multiple variants, which include a wide variety of content, contextual background colors, and powerful display options. Panels are similar to cards, but they don't include media.

Panel with Dropdown

image info

html

           <div class="panel" style="width: 25rem">
                <div class="panel-body">
                  <div class="pane d-flex align-items-center mt-0 mb-3">
                    <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                    <div class="ml-3">
                      <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                      <p class="m-0 pane-item">Cooking</p>
                    </div>
                    <div class="dropdown p-0 ml-auto pane-item">
                      <i 
                        class="fa fa-ellipsis-h display-1"
                        id="dropdownMenuButton"
                        data-toggle="dropdown"  
                        aria-expanded="false">
                      </i>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </div>
                    
                  </div>
                  <div class="card-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  </div>
                 
                </div>
            </div>

Panel with Users

image info

html

            <div class="panel" style="width: 25rem">
                <div class="panel-img">
                  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt=""/> 
                </div>
                <div class="panel-body">
                  <div class="panel-title ">
                    Bristol
                  </div>
                  <div class="panel-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                  <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170"/>
                  <img class="pane-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU"/>
                  <img class="pane-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU"/>
                  
                </div>
            </div>

Panel with Label

image info

html

           <div class="panel" style="width: 25rem">
                <div class="panel-body">
                  <div class="panel-label">
                    <div class="badge badge-flat bg-secondary">Label 1</div>
                    <div class="badge badge-flat bg-warning">Label 2</div>
                    <div class="badge badge-flat bg-danger">Label 3</div>
                  </div>
                  <div class="panel-title ">
                    Moon Fever
                  </div>
                  <div class="panel-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                  <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170"/>
                  <img class="pane-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU"/>
                  
                </div>
            </div>

Pane List

image info

html

         <div class="panel" style="width: 25rem">
            <div class="panel-body">
              <div class="d-flex justify-content-between align-item-center mb-1">
                <p class="mb-0">My Messages</p>
                <div class="dropdown p-0">
                  <i 
                    class="fa fa-ellipsis-h display-1"
                    id="dropdownMenuButton"
                    data-toggle="dropdown"  
                    aria-expanded="false">
                  </i>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                  </ul>
                </div>
              </div>
              <div class="pane d-flex align-items-center">
                <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                <div class="ml-3">
                  <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                  <p class="m-0 pane-item">Cooking</p>
                </div>
                <p class="ml-auto pane-item">5mins Ago</p>
              </div>
              <div class="pane d-flex align-items-center">
                <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                <div class="ml-3">
                  <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                  <p class="m-0 pane-item">Cooking</p>
                </div>
                <p class="ml-auto pane-item">5mins Ago</p>
              </div>
              <div class="pane d-flex align-items-center">
                <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                <div class="ml-3">
                  <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                  <p class="m-0 pane-item">Cooking</p>
                </div>
                <p class="ml-auto pane-item">5mins Ago</p>
              </div>
              <div class="pane d-flex align-items-center">
                <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                <div class="ml-3">
                  <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                  <p class="m-0 pane-item">Cooking</p>
                </div>
                <p class="ml-auto pane-item">5mins Ago</p>
              </div>
              <div class="pane d-flex align-items-center">
                <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                <div class="ml-3">
                  <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                  <p class="m-0 pane-item">Cooking</p>
                </div>
                <p class="ml-auto pane-item">5mins Ago</p>
              </div>
            </div>
          </div>

Panel with Progress

image info

html

            <div class="panel" style="width: 25rem">
                <div class="panel-body">
                  <div class="pane d-flex align-items-center mt-0">
                    <img class="pane-img" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" alt=""/>
                    <div class="ml-3">
                      <h6 class="m-0" style="font-weight:600;">Warren Briggs</h6>
                      <p class="m-0 pane-item">Cooking</p>
                    </div>
                    <p class="ml-auto pane-item">5mins Ago</p>
                  </div>
                  <div class="progress-container">
                    <div class="progress-text pane-item">Instagram</div>
                    <div
                      class="progress progress-primary"
                      role="progress"
                      min="0"
                      max="100"
                      value="20"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                  
                  <div class="progress-container">
                    <div class="progress-text progress-text-secondary">Twitter</div>
                    <div
                      class="progress progress-secondary"
                      role="progress"
                      min="0"
                      max="100"
                      value="30"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
        
                  <div class="progress-container">
                    <div class="progress-text progress-text-danger">Facebook</div>
                    <div
                      class="progress progress-danger"
                      role="progress"
                      min="0"
                      max="100"
                      value="80"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>

Notification

Progress