Skip to content
Related Articles

Related Articles

Improve Article

How to create bootstrap panel with footer ?

  • Last Updated : 26 Sep, 2021
Geek Week

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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :