...

Web Technologies - CSS

Back to Course

Lesson Description


Lession - #169 CSS Panels


CSS Panels are used to put content with same text color, background color, size, text style family, and so on . Every components inside this class share a similar text dimension, textual style tone, padding, alignment, and so forth

The panel tag is a compartment label that holds different labels and HTML. It is utilized to show/hide portions of the form . For example, you can incorporate controls that might be accessible to administrators or editors or enrolled clients, and so forth.

In the above image you can see three panels panel1,panel2 and panel3.

Let's see an example




<!DOCTYPE html>
< lang="en">
<head>
  <title>Panel 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.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Basic Panel</h2>
  <div class="panel panel-default">
    <div class="panel-body">A Basic Panel<div>
  </div>
</div>


Output:


Try it here