Skip to content
Related Articles

Related Articles

How to create a Bootstrap panel with a heading ?

View Discussion
Improve Article
Save Article
  • 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=
</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>


 Output: In the below output, a panel has been created with “Courses” as its header using Bootstrap.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!