Prev Page
Next Page  
Bootstrap Panels
Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class . In most basic form the panel component applies some border and padding around the content. 
Total bootstrap panels are :  Basic Pnael,  Panel with Heading,  Contextual Alternatives,  panel with Footer,  Panel with tables, Panel with list groups.
Basic Panel
<!DOCTYPE html>
<html>
<head>
   <title>Basic Panel</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
   <div class="panel panel-default">
        <div class="panel-body">Hi this is basic panel !</div>
    </div>
 
</div>
 
</body>
</html>
Output :
Hi this is basic panel !
Panel with Heading
The .panel-heading class to easily add a heading container to your panel.
<!DOCTYPE html>
<html>
<head>
   <title>Panel with Heading</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel sample content</div>
  </div>
 
</div>
 
</body>
</html>
Output :
Panel Heading
Panel sample content
Panel with Footer
The .panel-footer class adds a footer to the panel.
<!DOCTYPE html>
<html>
<head>
   <title>Panel with Footer</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
  <div class="panel panel-default">
      <div class="panel-body">Panel sample content</div>
      <div class="panel-footer">Panel Footer</div>
  </div>
 
</div>
 
</body>
</html>
Output :
Panel sample content
Panel Footer
Contextual Alternatives
To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger)
<!DOCTYPE html>
<html>
<head>
   <title>Contextual Alternatives</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <div class="panel panel-primary">
    <div class="panel-heading">Panel with primary headre</div>
        <div class="panel-body"> 
        Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text.</div>
    </div>
    <div class="panel panel-success">
    <div class="panel-heading">Panel with success headre</div>
        <div class="panel-body"> 
        Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text.</div>
    </div>
    <div class="panel panel-info">
    <div class="panel-heading">Panel with info headre</div>
        <div class="panel-body"> 
        Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text.</div>
    </div>
    <div class="panel panel-warning">
    <div class="panel-heading">Panel with warning headre</div>
        <div class="panel-body"> 
        Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text.</div>
    </div>
    <div class="panel panel-danger">
    <div class="panel-heading">Panel with danger headre</div>
        <div class="panel-body"> 
        Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text.</div>
    </div>
 
</div>
 
</body>
</html>
Output :
Panel with primary headre
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
Panel with success headre
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
Panel with info headre
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
Panel with warning headre
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
Panel with danger headre
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
Panel with Tables
Use the class .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.
<!DOCTYPE html>
<html>
<head>
   <title>Panel with Tables</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
   <div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Website URL's</div>
<div class="panel-body">
<p>The following table contains some website url's.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearn.xyz</td>
</tr>
                <tr>
<td>4</td>
<td>FreeTimeLearning</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody> 
</table>
</div>
 
</div>
 
</body>
</html>
Output :
Website URL's

The following table contains some website url's.

S.No Name URL
1 Free Time Learn www.freetimelearn.com
2 Free Time Learning www.freetimelearning.com
3 FreeTimeLearn www.freetimelearn.xyz
4 FreeTimeLearning www.freetimelearning.xyz
Panel with list groups
Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups. 
<!DOCTYPE html>
<html>
<head>
   <title>Panel with list groups</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
   <div class="panel panel-info">
<div class="panel-heading">Websites</div>
<div class="panel-body">
Educational websites
</div>
<!-- List group -->
<div class="list-group">
<a href="http://www.freetimelearn.com" target="_blank" class="list-group-item">www.freetimelearn.com</a>
<a href="http://www.freetimelearning.com" target="_blank" class="list-group-item">www.freetimelearning.com</a>
<a href="http://www.freetimelearn.xyz" target="_blank" class="list-group-item">www.freetimelearn.xyz</a>
<a href="http://www.freetimelearning.xyz" target="_blank" class="list-group-item">www.freetimelearning.xyz</a>
 
</div>
</div>
 
</div>
 
</body>
</html>
Output :
Websites
Educational websites
www.freetimelearn.com www.freetimelearning.com www.freetimelearn.xyz www.freetimelearning.xyz
  Prev Page
Next Page  
About F T L
Contact
Govt Exams
Partners
  © 2017 - 2022. All Rights Reserved by Free Time Learning .
    Designed by F T L

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.