Open In App

How to create bootstrap panel with footer ?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a free open source tool for designing modern and responsive websites and web applications. It is the most popular tool for developing websites that are responsive and also beautiful. Bootstrap Panels are boxes with or without a border. You may want to put your contents inside some boxes for a unique design. So in this article, we will learn how to implement a panel on our website and also how to customize it.

Approach:  We will create a div element and use the .panel and .panel-default classes to create a panel. The .panel-default creates a panel with a border around the contents placed inside the div container. Then we will implement title and footer using .panel-title and .panel-footer classes respectively. They will be placed inside the div container.

Import the Bootstrap CSS CDN in our project between the header tags.

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

 

Syntax: Create a div element and use the class .panel and .panel-default. Then place another div element with .panel-body inside that.

<div class="panel panel-default">
    <div class="panel-body">Welcome</div>
</div>

To change the color, we can use the other formats of panels like 

  • panel-default
  • panel-primary
  • panel-success
  • panel-warning
  • panel-info
  • panel-danger

Example: Now we will create a panel-heading, panel-title and panel-footer using .panel-heading .panel-title class and footer using .panel-footer class. Generally, the hierarchy of placing the elements is first heading then the body, and the footer. Inside the body of the panel, we place the panel title and panel contents.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href=
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Welcome</div>
        <div class="panel-body">
            <div class="panel-title">Welcome</div>
            <div>
                GeeksforGeeks is the best
                website for programming.
            </div>
        </div>
        <div class="panel-footer">Footer</div>
    </div>
</body>
  
</html>


Output: 



Last Updated : 26 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads