Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create bootstrap panel with footer ?

Improve Article
Save Article
  • Last Updated : 26 Sep, 2021
Improve Article
Save Article

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: 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!