Bootstrap - panels and wells

19RH1A05H6 Thanvi lahari Pendyala
Last Updated: May 13, 2022

Introduction

Panels are used to put DOM components into a bordered box or a <div> container with some padding around its content in bootstrap. Bootstrap also has a feature that causes the content to appear sunken or inset when placed inside a box using wells.

The panels and wells are used to attract the reader's attention to the specific content of any website by providing padding and background color to the container or box. We can use these components to quote the content.

Bootstrap Panels

Panels can be created by adding the .panel class in any container or block element along with the .panel-default class. The .panel-body class is used to provide a body to a panel. The content in bootstrap usually has a heading, body, and footer parts. The types of panels present in bootstrap are:

  1. Panel with heading
  2. Panel with footer
  3. Panel group
  4. Panel with Contextual Classes
  5. Panel with tables


The panel heading, panel footer are provided with default background color, and contextual panel classes apply the color according to the class used to create the header or footer.

Panel with heading

Bootstrap provides us two ways to add a panel heading:

  1. Add .panel-heading class to the container.
  2. Add .panel-title class to with any pre-styled heading tags from <h1> to <h6>.

<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

   </head>

   <body>

     <div class="panel panel-default">

  <div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

<div class="panel panel-default">

  <div class="panel-heading">

    <h3 class="panel-title">Panel heading with heading tags</h3>

  </div>

  <div class="panel-body">

    Panel content

  </div>

</div>

   </body>

</html>



In the above code, the .panel-heading provides a default heading for the panel, whereas the .panel-title has to be given inside any pre-styled tag to get a heading. The .panel-body provides a default body section for the panel to style our content.

Panel with footer

To add a panel with footer .panel-footer class is used after the panel body with the .panel-body class to provide a footer for the body.

<div class="panel panel-default">

<div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    Panel content

  </div>

  <div class="panel-footer">Panel footer</div>

</div>

 

Panel group

The .panel-group class groups the panels together by reducing the bottom margin of each panel. The .panel-group is used inside any <div> container wrapped around the panels together.

<div class="panel-group">

<div class="panel panel-default">

  <div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

<div class="panel panel-default">

  <div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

<div class="panel panel-default">

  <div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

</div>

 

Panel with contextual classes

Usually, the panel provides default background colors to all panel components. The contextual panel classes are used to make it meaningful to a context and show the impact to readers. The classes available are panel-primary, panel-success, panel-info, panel-warning, panel-danger.

<div class="panel panel-primary">

<div class="panel-heading">Panel with panel-primary class</div>

      <div class="panel-body">Panel Content</div>

</div>

<div class="panel panel-success">

<div class="panel-heading">Panel with panel-success class</div>

      <div class="panel-body">Panel Content</div>

</div>

<div class="panel panel-info">

<div class="panel-heading">Panel with panel-info class</div>

      <div class="panel-body">Panel Content</div>

</div>

 

 

Panel with tables

To get a borderless or seamless table with panels, we use the .table class inside the .panel class. A body is not necessary inside a panel while using a table.

<div class="panel panel-default">

  <div class="panel-heading">Panel heading</div>

  <table class="table">

    <tr> 

      <th>First Name</th>

      <th>Last Name</th>

   </tr>

   <tr> 

      <td>Coding</td>

      <td>Ninjas</td>

   </tr>

   <tr>

      <td>John</td>

      <td>Smith</td>

   </tr>

  </table>

</div>

 

Bootstrap Wells

A well is similar to a panel with rounded corners and padding around it in bootstrap. It produces sunken or an inset effect on the web page with a gray background to attract readers and create attention towards specific content in a web page. The wells can be created by wrapping the content you want to generate attention in a <div> container with .well class in it.

The wells are available in three sizes; normal, small, and large. The size of the well can be changed by using classes .well-sm for small and .well-lg for large. These effect the padding and modify the size of a well. The background color can also be changed by adding background property to the CSS file.

<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

   </head>

   <body>

     <div class="container">

   <div class="well well-sm">Small Well</div>

  <div class="well">Normal Well</div>

  <div class="well well-lg">Large Well</div>

</div>

   </body>

</html>

 

Frequently Asked Questions:

  1. How do I create a panel in bootstrap?
    A panel is a bordered box used to put DOM components into a container with padding around its content. A panel can be created using .panel and .panel-default classes inside a <div> element.
     
  2. How do I create a well in bootstrap?
    A well is a round bordered and padded box used to create attention towards specific content on a webpage. It can be created using a .well class.
     
  3. How do I change the background color of a well?
    The background color of a well can be changed by giving background(not background color) property in CSS and setting it to any color you wish.
     
  4. Does bootstrap 4 support panels and wells?
    Boostrap 4 doesn't support panels and wells, but it introduced a new card component built with flexbox for efficiency.

Key Takeaways:

Hey Ninjas, Let's discuss the article in brief,

  • Bootstrap has panels and wells to provide default padding around content and create attention towards specific content on a webpage.
  • The panel's content can be categorized as header, body, footer, tables, groups, and lists. Each of them has a separate class to use in the <div> container.
  • The well creates a padding and sunken effect with gray background color around content to attract readers. The sizes of the well can be changed to small or large, and the default size of a well is normal.
     

Hello Ninjas! We found the perfect course for you to enhance your development skills in web development. Check this out and become the best developer.

 

Happy Learning! 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think