How to create a Bootstrap panel with a heading ?

Last Updated : 10 Feb, 2022

A panel is a rectangular component of Bootstrap, typically used to add content to the website. It can also have a header or footer, or both. Bootstrap also provides various classes to add padding to the content or multiple colors to make it more attractive.

CDN Link: First, include the style sheet to the code to use Bootstrap for creating the panel.

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

Add the following syntax to have a panel with the heading. The panel-heading class enables us to have a heading to our panel.

Syntax:

<div class="panel panel-default">
   <div class="panel-heading">
           Heading content
   </div>
   <div class="panel-body">
       Body content
   </div>
</div>

The below example demonstrates this approach.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
          
        <div class="panel panel-default"> 
            <div class="panel-heading"> 
                Courses 
            </div> 
            <div class="panel-body"> 
                C++ for beginners 
            </div> 
            <div class="panel-body"> 
                Python for beginners 
            </div> 
            <div class="panel-body"> 
                Java for beginners 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>