How to create bootstrap panel with footer ?
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
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.