Easy learning with example program codes

Bootstrap 4 List Group Contextual Classes

Bootstrap provide the facility to create a group of list with list items. The most basic list group is an unordered list with list items. Use an ul element with class .list-group, and li elements with class .list-group-item to create a basic list group.

Bootstrap provides .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and list-group-item-light classes to color list items.

Bootstrap 4 Group Contextual Classes Example:

<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap 4 Contextual Classes Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
<div class="container">
  <h2>List Group With Contextual Classes</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
<h2>Linked Items With Contextual Classes</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action item</a>
    <a href="#" class="list-group-item list-group-item-success">Success item</a>
    <a href="#" class="list-group-item list-group-item-secondary">Secondary item</a>
    <a href="#" class="list-group-item list-group-item-info">Info item</a>
    <a href="#" class="list-group-item list-group-item-warning">Warning item</a>
    <a href="#" class="list-group-item list-group-item-danger">Danger item</a>
    <a href="#" class="list-group-item list-group-item-primary">Primary item</a>
    <a href="#" class="list-group-item list-group-item-dark">Dark item</a>
    <a href="#" class="list-group-item list-group-item-light">Light item</a>

Try it:

Bootstrap 4 Contextual Classes Example on

Bootstrap 4 Tutorial

Bootstrap 4 package tutorial.
Bootstrap 4 CDN link tutorial.
Create First Web Page With Bootstrap 4.
Bootstrap 4 Grid System.
Bootstrap 4 grid equal columns example.
Bootstrap 4 grid responsive equal columns.
Bootstrap 4 grid responsive unequal columns.
Bootstrap 4 Jumbotron tutorial.
Bootstrap 4 Full Width Tutorial.
Bootstrap 4 Page Header Tutorial.
Bootstrap 4 Well tutorial.
Bootstrap 4 Alert Tutorial.
Bootstrap 4 Alert Link Tutorial.
Bootstrap 4 Closing Alerts tutorial.
Bootstrap 4 Animated Alerts.
Bootstrap 4 Buttons Style.
Bootstrap 4 Buttons Outline Tutorial.
Bootstrap 4 Buttons Size Tutorial.
Bootstrap 4 Block Level Buttons tutorial.
Bootstrap 4 Buttons States Tutorial.
Bootstrap 4 Button Groups Tutorial.
Bootstrap 4 Vertical Button Groups.
Bootstrap 4 Justified Button Groups.
Bootstrap 4 Nesting Button Groups.
Bootstrap 4 Split Button Dropdowns.
Bootstrap 4 Badges Tutorial.
Bootstrap 4 Basic Progress Bar.
Bootstrap 4 Progress Bar Height.
Bootstrap 4 Progress Bar With Label.
Bootstrap 4 Colored Progress Bars.
Bootstrap 4 Striped Progress Bars.
Bootstrap 4 Animated Progress Bars.
Bootstrap 4 Stacked Progress Bars.
Bootstrap 4 Pagination Tutorial.
Bootstrap 4 Pagination – Active State.
Bootstrap 4 Pagination – Disabled State.
Bootstrap 4 Pagination – Sizing.
Bootstrap 4 Pagination Breadcrumbs.
Bootstrap 4 List Groups Tutorial.
Bootstrap 4 List Group With Linked Items.
Bootstrap 4 Active Item in a List Group.
Bootstrap 4 Disabled Item in a List Group.
Bootstrap 4 Group Contextual Classes.
Bootstrap 4 Basic Panel Tutorial.
Bootstrap 4 Panel Heading Tutorial.
Bootstrap 4 Panel Footer Tutorial.
Bootstrap 4 Cards Tutorial.
Bootstrap 4 Contextual Cards.
Bootstrap 4 Card Titles, Text and Links.
Bootstrap Card Image Tutorial.
Bootstrap Card Image Overlay.
Bootstrap 4 Dropdowns Tutorial.
Bootstrap 4 Dropdowns Divider tutorial.
Bootstrap 4 Dropdowns Header Tutorial.
Bootstrap 4 Dropdowns Active Items.
Bootstrap 4 Dropdowns Disabled Items.
Bootstrap 4 Dropdowns Position Tutorial.
Bootstrap 4 Dropup Tutorial.
Bootstrap 4 Simple Collapsible.
Bootstrap 4 Collapsible Panel Tutorial.
Bootstrap Collapsible List Tutorial.
Bootstrap 4 Stacked Form Tutorial.
Bootstrap 4 Inline Form Tutorial.

Copyright © 2018 CodesJava Protection Status SiteMap