Define about Panel Heading & Panel Footer.

Panel Heading

Panel Heading

Panel Content

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

Example

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

Panel Footer

Panel Content

Panel Footer

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

Example

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

Show the structure of Bootstrap Panels.

Bootstrap Panels

 Panels are created with the .panel class, and content inside the panel has a .panel-body class:

Example

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Define the various list Group With Linked Items.

List Group With Linked Items

The items in a list group can also be hyperlinks. This will add a grey background color on hover:

First item Second item Third item

To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>:

Example

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

---

Active State

First item Second item Third item

Use the .active class to highlight the current item:

Example

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

---

Disabled Item

The following list group has a disabled item:

First item Second item Third item

To disable an item, add the .disabled class:

Example

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

---

Contextual Classes

Contextual classes can be used to color list items:

• First item
• Second item
• Third item
• Fourth item

The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger:

Example

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

---

Custom Content

You can add nearly any HTML inside a list group item.
Bootstrap provides the classes .list-group-item-heading and .list-group-item-text which can be used as follows:

Example

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

       

show the List Group With Badges.

List Group With Badges

Anybody  can also add badges to a list group. The badges will automatically be positioned on the right:

• 12 New
• 5 Deleted
• 3 Warnings

To create a badge, create a <span> element with class .badge inside the list item:

Example

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
  <li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>

Show the example of Basic List Groups.

Basic List Groups

The most basic list group is an unordered list with  three list items:

• First item
• Second item
• Third item

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:

Example

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

What is Pager & Align Buttons?

What is Pager?

Pager is also a form of pagination.
Pager provides previous and next buttons (links).
To create previous/next buttons, add the .pager class to an <ul> element:

Example

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

 

 

Align Buttons

Use the .previous and .next classes to align each button to the sides of the page:

Example

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

What is Breadcrumbs?

Breadcrumbs

Another form for pagination is called breadcrumbs:

1. Home
2. Private
3. Images
4. Vacation

The .breadcrumb class indicates the current page's location within a navigational hierarchy:

Example

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">images</a></li>
  <li class="active">Vacation</li>
</ul>

Show the Active State & Disabled State.

---

Active State

Active state shows what is the current page really:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Add class .active to let the user know which page he/she is on:

Example

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>

  <li><a href="#">6</a></li>  

  <li><a href="#">7</a></li>

 
</ul>

 

 

Disabled State

A Bootstrap  disabled link cannot be clicked:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

Add class .disabled if a link for some reason is disabled:

Example

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>

   <li><a href="#">6</a></li>

  <li><a href="#">7</a></li>

 
</ul>

 

 

Show the structure of Pagination Sizing.

---

Pagination Sizing

Any Pagination blocks can also be sized to a larger size or a smaller size:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

Example

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

What is Bootstrap Pagination?

Bootstrap Pagination

---

 Pagination

Although  you have a web site with lots of pages, you may need to add some sort of pagination to each page.
 Any  basic pagination in Bootstrap looks like this:

• 1
• 2
• 3
• 4
• 5

To create a basic pagination, you must add the .pagination class to an <ul> element:

Example

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Show the structures of Striped Progress Bars, Animated Progress Bar, Stacked Progress Bars

Striped Progress Bars

Progress bars can also be striped:

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

Add class .progress-bar-striped to add stripes to the progress bars:

Example

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

---

Animated Progress Bar

40%

Add class .active to animate the progress bar:

Example

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>

---

Stacked Progress Bars

This Progress bars can also be stacked:

Free Space

Warning

Danger

Create a stacked progress bar by placing multiple bars into the same <div class="progress">:

Example

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Describe details of Progress Bar With Label & Colored Progress Bars

Progress Bar With Label

A progress bar with a label is  describing below:

70%

Remove the .sr-only class from the progress bar to show a visible percentage:

Example

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

 

Colored Progress Bars

Contextual classes are used to provide "meaning through colors".
The contextual classes that can be used with progress bars are:

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

The following example shows how to create progress bars with the different contextual classes:

Example

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Explain details Basic Progress Bar of Bootsrap

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.
Bootstrap provides several types of progress bars.
A default progress bar in Bootstrap looks like this:

70% Complete

To create a default progress bar, add a .progress class to a <div> element:

Example

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
 </div>
</div>
Very important  Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve some of their effects).

Very important  Note: To help improve accessibility for people using screen readers, you should include the aria-* attributes

Explain the structure of other lavels.

On the other hand Badges can also be used inside other elements, like buttons:


The following example shows how to add badges to buttons:

Example

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

---

---

Labels

Labels are used to provide additional information about something:

1.Example New

2.Example New

3.Example New

4.Example New

5.Example New

6. Example New

Use the .label class,  followed by one of the six contextual classes .label-default,  

.label-primary, .

label-success, .label-info, .

label-warning or .label-danger, 

within a <span> element to create a label:

Example

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>

The following example shows all contextual label classes:

Default Label 

 Primary Label 

 Success Label 

 Info Label 

 Warning Label Danger Label

Example

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

Explain the structure of Bootstrap Badges.

Badges

Basically Bootstrap Badges are numerical indicators of how many items are associated with a link:
1.News 5
2.Comments 10
3.Updates 2

The numbers (5, 10, and 2) are the badges.
Use the .badge class within <span> elements to create badges:

Example

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

Show the structure of Glyphicon Syntax.

Glyphicon Syntax

A glyphicon must be  inserted with the following syntax:

<span class="glyphicon glyphicon-name"></span>

The name part in the syntax above must be replaced with the proper name of the glyphicon.

Show the structure of Glyphicons.

Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

Glyphicons can be used in-- text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:
1.Envelope glyphicon:
2Print glyphicon:
3.Search glyphicon:
4.Download glyphicon:

Glyphicon Example

Shows different ways to use glyphicons:

Example

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>  <p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p> 

What are block level buttons & active/disable buttons?

Block Level Buttons

A block level button spans the entire width of the parent element.
Add class .btn-block to create a block level button:

Example

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:

Example

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

Explain the different button sizes.

Button Sizes

Bootstrap provides four button sizes:

Large, Medium, Small, Xsmall

The classes that define the different sizes are:
• .btn-lg
• .btn-md
• .btn-sm
• .btn-xs

 Structure

 <button type="button" class="btn btn-primary btn-lg">Large</button> 
<button type="button" class="btn btn-primary btn-md">Medium</button>
 <button type="button" class="btn btn-primary btn-sm">Small</button>
 <button type="button" class="btn btn-primary btn-xs">XSmall</button>