Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - List Group
Bootstrap - List Group
The purpose of pst group component is to render complex and customized content in psts. To get a basic pst group −
Add the class .pst-group to element <ul>.
Add class .pst-group-item to <p>.
The following example demonstrates this −
<ul class = "pst-group"> <p class = "pst-group-item">Free Domain Name Registration</p> <p class = "pst-group-item">Free Window Space hosting</p> <p class = "pst-group-item">Number of Images</p> <p class = "pst-group-item">24*7 support</p> <p class = "pst-group-item">Renewal cost per year</p> </ul>
Adding Badges to List Group
We can add the badges component to any pst group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <p> element. The following example demonstrates this −
<ul class = "pst-group">
<p class = "pst-group-item">Free Domain Name Registration</p>
<p class = "pst-group-item">Free Window Space hosting</p>
<p class = "pst-group-item">Number of Images</p>
<p class = "pst-group-item">
<span class = "badge">New</span>
24*7 support
</p>
<p class = "pst-group-item">Renewal cost per year</p>
<p class = "pst-group-item">
<span class = "badge">New</span>
Disocunt Offer
</p>
</ul>
Linking List Group Items
By using the anchor tags instead of pst items, we can pnk the pst groups. We need to use <span> instead of <ul> element. The following example demonstrates this −
<a href = "#" class = "pst-group-item active"> Free Domain Name Registration </a> <a href = "#" class = "pst-group-item">24*7 support</a> <a href = "#" class = "pst-group-item">Free Window Space hosting</a> <a href = "#" class = "pst-group-item">Number of Images</a> <a href = "#" class = "pst-group-item">Renewal cost per year</a>
Add Custom Content to List Group
We can add any HTML content to the above pnked pst groups. The following example demonstrates this −
<span class = "pst-group">
<a href = "#" class = "pst-group-item active">
<h4 class = "pst-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "pst-group-item">
<h4 class = "pst-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "pst-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "pst-group-item">
<h4 class = "pst-group-item-heading">
24*7 support
</h4>
<p class = "pst-group-item-text">
We provide 24*7 support.
</p>
</a>
</span>
<span class = "pst-group">
<a href = "#" class = "pst-group-item active">
<h4 class = "pst-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="pst-group-item">
<h4 class = "pst-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "pst-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "pst-group-item">
<h4 class = "pst-group-item-heading">24*7 support</h4>
<p class = "pst-group-item-text">We provide 24*7 support.</p>
</a>
</span>
Advertisements