Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

BOOTSTRAP TUTORIAL

Bootstrap Panels

A panel in bootstrap is a bordered box with some padding around its content:

Generally a panel contains three parts

  • Panel header
  • Panel content
  • Panel footer

Panel Example

To get a basic panel, just add class .panel to the

element. Also add class .panel-default to this element as shown in the following example -

<div class = "panel panel-default">
   <div class = "panel-body">
       This is a Basic panel
   </div>
</div>

Panel Heading

The .panel-heading class adds a heading to the panel :

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
</div>

Panel Footer

The .panel-footer class adds a footer to the panel :

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Panel Group

To group many panels together, wrap a <div> with class .panel-group around them. The .panel-group class clears the bottom-margin of each panel:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
</div>

Panels with Contextual Classes

To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger) :

<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>

<div class = "panel-body">
This is a Basic panel
</div>
</div>

<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>

<div class = "panel-body">
This is a Basic panel
</div>
</div>

<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>

<div class = "panel-body">
This is a Basic panel
</div>
</div>

<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>

<div class = "panel-body">
This is a Basic panel
</div>
</div>

<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>

<div class = "panel-body">
This is a Basic panel
</div>
</div>
Previous Next
Applied Art and Communication Design Course in Mumbai
Index Solutions - Web Design and Development Company Mumbai
Advance Digital Marketing Course Online
Advance Digital Marketing Course in Thane Mumbai
Online Full Stack Developer Course in Mumbai Thane
Online Job Portal in India
Index Solutions - Web Design and Development Company in Mumbai India