Holla Tech - Learn
Bootstrap 3: Panels
 

A panel is nothing but a bordered box with some padding.
To create a Bootstrap panel, first create a <div> with panel class. Next, add <div> elements with panel-heading, panel-body, panel-footer classes to the panel <div> for panel head, body, and foot respectively.

Styles can be applied to panels by using these classes: panel-default, panel-primary, panel-success, panel-info, panel-warning, panel-danger

For Example: 

<div class=“container”>
  <div class=panel panel-success>
    <div class=panel-heading>Head</div>
    <div class=panel-body>Body</div>
    <div class=panel-footer>Foot</div>
  </div>
  <div class=panel panel-danger>
    <div class=panel-heading>Head</div>
    <div class=panel-body>Body</div>
    <div class=panel-footer>Foot</div>
  </div>
</div>

 

To create a panel group, simply enclose panel <div> elements inside a <div> element with panel-group class.  

TASK:
Paste the line of codes in a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT