What is Bootstrap Panel?

Author - Webner
6.07.2020
|
0 Comments
||

Introduction

Bootstrap is a popular HTML, CSS, and JavaScript framework for developing a responsive and mobile-friendly website. It includes jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyph icon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse, tabs, pills, navbar, inputs, modals, tooltip, popover, and scrollspy.

Here we will be discussing Bootstrap Panel

The panel is a bordered box with padding around its element. The components are used when you put your DOM component in a box.
The class .panel is used within the <div> element to create the panels. The .panel-body class is the content inside the panel.

Generally, a panel contains three parts:

  1. Panel header
  2. Panel content
  3. Panel footer

Before moving to the next step one important thing is :
bootstrap panel 1

Add Bootstrap Package Solution Explore >> NuGet Package Manager >> Select Browser >> Search bootstrap.
Install that package.
bootstrap panel 2

Bootstrap Panel Group

The panel group is used to group panels together.
For a panel group, you have to wrap a <div> with class .panel-group around them. The .panel-group class clears the bottom-margin of each panel.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Main Heading</h2>
<p class="text-md-center"></p>
<div class="panel panel-default">
<div class="panel-heading custom_class">
<h3>Webners Solution</h3>
<p class="text-md-left"></p>
</div>
<div class="panel-heading custom_class">
<h3> Solution</h3>
<p class="text-md-left"></p>
</div>
</div>
</div>
</body>
</html>

In Visual Studio the code shows like this:
bootstrap panel 3
OUTPUT
bootstrap panel 4

Bootstrap Panel with contextual classes

Contextual classes use to color the panels using (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger).

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>
</head>
<body>
<div class="container">
<h1>Panels with Contextual Classes</h1>
<h2>Panel heading with different colors</h2>
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content for Success</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content for Primary Color</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content For Panel-Info </div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content For Panel Default</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content for Panel danger</div>
</div>
</div>
</div>
</body>
</html>

OUTPUT
panel 5 e

Panel Footer

The panel-footer is a class used to add a footer to the panel. In this, we use Panel Content and Panel Footer whereas Panel Content we write body in the content panel.
Example:
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer { position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: lightblue;
color: white;
text-align: center; }
.Heading {position: fixed;
left: 0;
bottom: 90%;
width: 100%;
background-color: lightpink;
color: white;
text-align: center; }
</style>
</head>
<body>
<div class="container">
<div class="footer">
<p>Footer</p>
</div>
<div class="Heading">
<p>Heading</p>
</div>
</div>
</body>
</html>

OUTPUT
panel 6 e

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *