Bootstrap Panel

Bootstrap is a comprehensive front end web development framework. It comes with many fancy features out of the box. Bootstrap panel is one such feature. A panel in bootstrap is a bordered box having some header and body. To create a default panel with bootstrap, simply add “panel” and “panel-default” class to a div. Inside the div create another div and add “panel-body” class to that div. This creates a simple default bootstrap panel without a header. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Default Panel</h1>
        <div class="panel panel-default">
            <div class="panel-body">This is a default panel</div>
        </div>
    </body>

</html>

Download the code
Try the code

If you open the above web page in browser, you should see some text in a bordered box. This bordered box is a panel. You can further add header and footer to a panel.

Bootstrap Panel with Header and Footer

To create header add an inner div at same level with the panel-body and add class “panel-heading” to it. Similarly, for footer, create a div and add “panel-footer” class to that div. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Default Panel</h1>
        <div class="panel panel-default">
            <div class="panel-heading">Knowledge Hills</div>
            <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
            <div class="panel-footer">Copyright 2016 &#64; Knowledge Hills</div>
        </div>
    </body>

</html>

Download the code
Try the code

Now if you open the above webpage in browser, you should see a panel with a header, body and footer. The header and footer have a light grey background.

Panel Group

Bootstrap panels can be grouped inside panel group. The bottom margin from all the panels inside the panel group is removed to create a group effect. To create a panel group. Create a div with class “panel-group” and add all the panels inside that div. Take a look at the following examples.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Default Panel</h1>
        
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
                <div class="panel-footer">Copyright 2016 &#64; Knowledge Hills</div>
            </div>
             <div class="panel panel-default">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
                <div class="panel-footer">Copyright 2016 &#64; Knowledge Hills</div>
            </div>
            
        </div>
    </body>

</html>

Download the code
Try the code

Contextual Panel Classes

You can also change the look and feel of the panels by using contextual classes instead of the default “panel-default” class. The contextual classes are “panel-primary”, “panel-success”, “panel-info”, “panel-warning”, “panel-danger”. Take a look at the following example to see how these classes are implemented.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Default Panel</h1>
        
       
            <div class="panel panel-success">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
            </div>
          
            <div class="panel panel-primary">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
            </div>
        
            <div class="panel panel-info">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
            </div>
        
            <div class="panel panel-warning">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
            </div>
        
            <div class="panel panel-danger">
                <div class="panel-heading">Knowledge Hills</div>
                <div class="panel-body">Programming Tutorials and Tips and Tricks</div>
            </div>
       
    </body>

</html>

Download the code
Try the code

<<< Bootstrap List GroupsBootstrap Dropdown >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .