Holla Tech - Learn
Bootstrap 3: List Groups
 

A basic Bootstrap list group can be created by using list-group class for a <ul> element and list-group-item class for all its <li> elements.

The active/disabled classes are used to highlight/disable list group items.

Additional styling can be added by using these classes: list-group-item-success, list-group-item-info, list-group-item-warning, list-group-item-danger

For Example: 

<div class=“container”>
  <ul class=list-group>
    <li class=list-group-item active>HTML</li>
    <li class=list-group-item disabled>CSS</li>
    <li class=list-group-item list-group-item-success>JS</li>
  </ul>
</div> 

 

To create a list group with links, just replace <ul> and <li> elements in a basic list group with <div> and <a> elements respectively.

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