Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set Bootstrap Panel with Heading

Bootstrap Web Development CSS Framework

Follow the below steps to set Bootstrap panel with heading −

  • Use .panel-heading class to add a heading container to your panel.
  • Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

You can try to run the following code for panel with headings in Bootstrap −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "panel panel-default">
         <div class = "panel-heading">
            Tutorials
         </div>
         <div class = "panel-body">
            Learn for free
         </div>
      </div>
         
      <div class = "panel panel-default">
         <div class = "panel-heading">
            <h3 class = "panel-title">
               Quiz
            </h3>
         </div>
               
         <div class = "panel-body">
            Attempt these quizzes
         </div>
      </div>
   </body>
</html>
Updated on: 2020-06-12T18:15:50+05:30

361 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements