Lists in Bootstrap

How to use lists in Bootstrap?

There are different listing styles in bootstrap

They are

Unordered list:

 
 <h5><b>Unordered list</b></h5>
    <i>Lisgroup with unordered list</i>
    <ul class="list-unstyled">
        <li>Home</li>
        <li>
            Training
            <ul>
                <li>online training</li>
                <li>offline training</li>
            </ul>
        </li>
        <li>placement</li>
        <li>contact us</li>
        <li>About us</li>
    </ul>

In the above code snippet we have defined the unordered lists. we are declaring <ul> class as listunstyled which defines the list as unstyled in the output and in the<ul> class we are having <li> class values.

output

Ordered list

The ordered list is used to display the list in the order

  
 <h5> <b>ordered lists</b> </h5>
    <p><i>Ordered lists are used to create the lists in order</i> </p>
    <ol>
        <li>Home</li>
        <li>
            Training
            <ol>
                <li>online training</li>
                <li>offline training</li>
            </ol>
        </li>
        <li>placement</li>
        <li>contact us</li>
        <li>About us</li>
    </ol>

Ordered list

In the above code snippet we have defined the ordered list. we have taken class as <ol> which is used to display the order of the list and we ha ve taken <li> in the <ol> which defines the values in the list

output

List inline:

List inline is used to display the list in a single line

<h5><b>Lists Inline</b></h5>
    <p><i> List -inline is used to create the lists in a single line</i></p>
    <ul class="list-inline">
        <li>Home</li>
        <li>Training</li>
        <li>Placement</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>

List-inline

In the above code snippet we have created the list in a single line using list-inline class. We have taken class as List-inline and we have declared the <li> values in <li> class.

output

List-grouping

List grouping is used to display the list in the group

<h5><b>ListGrouping</b></h5>
    <p><i>It is used to group the lists</i></p>
    <ul class="list-group">
        <li class="list-group-item">Home</li>
        <li class="list-group-item">Favourites</li>
        <li class="list-group-item">My Cloud</li>
        <li class="list-group-item">Network</li>
        <li class="list-group-item">Messages</li>
        <li class="list-group-item">Settings</li>
    </ul>

List grouping

In the above code snippet we have defined the list grouping we have taken class as List-group which is used to display the list in group and awe have taken <li> to create the list values.

output

Contextual classes

Contextual classes can be added to list for the colors.

 
<h5><b>list group with contextual classes</b></h5>
    <p><i>It adds colors to the list groups</i></p>
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">Home</li>
        <li class="list-group-item list-group-item-danger">Favourites</li>
        <li class="list-group-item list-group-item-info">My Cloud</li>
        <li class="list-group-item list-group-item-warning">Network</li>
        <li class="list-group-item list-group-item-primary">Messages</li>
        <li class="list-group-item list-group-item-default">Settings</li>
    </ul>

Listgroup with contextual colors

In the above code snippet we have used the Contextual classes to add colors to the lists. we have taken class as

List-group -item-success- renders green color

List-group -item-danger- renders red color

List-group -item-primary- renders light blue color

List-group -item-warning- renders orange color

List-group -item-default- renders white color

output

List-group with badges:

List group with badges are used to add badges to the end of the lists in the group.

 
<h5><b>Listgroup with badges</b></h5>
    <p><i>It adds badges to the list</i>  </p>
    <ul class="list-group">
        <li class="list-group-item list-group-item-danger "><span class="badge">1</span>Home</li>
        <li class="list-group-item list-group-item-success"><span class="badge">2</span>Favourites</li>
        <li class="list-group-item list-group-item-default"><span class="badge">3</span>My Cloud</li>
        <li class="list-group-item list-group-item-primary"><span class="badge">4</span>Network</li>
        <li class="list-group-item list-group-item-info"><span class="badge">5</span>Messages</li>
        <li class="list-group-item list-group-item-warning"><span class="badge">6</span>Settings</li>
    </ul>

Listgroup with badges

In the above code snippet we have used class as List group and we have taken class as to declare the badges in the list values of the <li>.

output

List group with linked items

List group with linked item are used to add the links to the lists.

 
 <h4><b>listgroup with linkeditem</b></h4>
    <p><i>It gives links to the websites</i></p>
    <div class="list-group">
        <a href="http://www.dotnetfunda.com" class="list-group-item list-group-item-danger"><span class="badge">1</span>dotnetfunda</a>
        <a href="http://www.techfunda.com" class="list-group-item list-group-item-warning"><span class="badge">2</span>techfunda</a>
        <a href="http://www.itfunda.com" class="list-group-item list-group-item-default"><span class="badge">3</span>itfunda</a>
        <a href="http://www.kidsfunda.com" class="list-group-item list-group-item-success"><span class="badge">4</span>kidsfunda</a>
        <a href="http://www.farmingfunda.com" class="list-group-item list-group-item-info"><span class="badge">5</span>farmingfunda</a>
        <a href="http://www.funddovideo.com" class="list-group-item list-group-primary"><span class="badge">6</span>fundoovideo</a>
    </div>

Listgroup with linked items

In the above code snippet we have defined how to link the list group. We have declared class as list group and <a> as linked tag. we have given six linked <a>tags for the list group as dotnetfunda, techfunda, itfunda, kidsfunda, farmingfunda, fundoovideo

output

List in active state

List with active state is used to keep the list as active

<h5><b>Lisgroup in active state</b></h5>
    <i>It is used to keep the lists in active state</i>
    <div class="list-group">
        <a href="http://www.dotnetfunda.com" class="list-group-item active">dotnetfunda</a>
        <a href="http://www.dotnetfunda.com" class="list-group-item ">techfunda</a>
        <a href="http://www.dotnetfunda.com" class="list-group-item ">itfunda</a>
        <a href="http://www.dotnetfunda.com" class="list-group-item ">kidsfunda</a>
    </div>

Listgroup in active state

In the above code snippet we have defined how to keep the list in active state. we have declared class aslistgroup and we are having <a> tag as a link which we are giving link in the <a> tag as active.

output

List with disabled state

List with disabled state is used to disable the link

 <h5><b>Lisgroup with disabled state</b></h5>
    <i>It is used to arrange the lists in disabled state</i>
    <div class="list-group">
        <a href="http://www.dotnetfunda.com" class="list-group-item disabled">dotnetfunda</a>
        <a href="http://www.dotnetfunda.com" class="list-group-item active">techfunda</a>
        <a href="http://www.dotnetfunda.com" class="list-group-item disabled ">itfunda</a>
        <a href="http://www.dotnetfunda.com" class="list-group-item active ">kidsfunda</a>
    </div>

List group with disabled state

In the above code snippet we have defined how to keep the list in active and disable state. we have declared class as list group and we are having <a> tag as a link which we are giving link in the <a> tag as active and disabled.

output

List group with glyphicons

Glyphicons are used as icon fonts.

 <h5><b>lists with glyphicons</b></h5>
    <i>glyphicos are used as symbols</i>
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <span class="glyphicon glyphicon-home"></span> Home <span class="badge">512</span>
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-file"></span> File <span class="badge">45</span>
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-search"></span> search <span class="badge">9</span>
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-signal"></span> Network <span class="badge">8</span>
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-hand-right"></span> Handright <span class="badge">32</span>
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-envelope"></span> Messages <span class="badge">16</span>
        </a>

    </div>

Listgroup with glyphicons

In the above code snippet we have defined listgroup with glyphicons.

<glyphicon glyphicon-Home>- renders hoome icon
<glyphicon glyphicon-file>- renders file icon
<glyphicon glyphicon-handright>- renders right hand icon
<glyphicon glyphicon-envelope>-renders envolope icon
<glyphicon glyphicon-signal>- renders network icon
<glyphicon glyphicon-search>-renders search icon

output

Reverse order list:

It is used reverse the list

<h5><b>Reversed ordered list</b></h5>
    <i>It is used to reverse the list order</i>
    <ol reversed>
        <li>dotnetfunda</li>
        <li>techfunda</li>
        <li>itfunda</li>
    </ol>

Reversed ordered list

In the above code snippet we have defined how to reverse the order by using

<ol reversed>- renders the values in reversed ordered

output

Adding Custom content to list group:

We can add the html content to the list group

 <h5><b>Adding custom content</b></h5>
    <i>Adding text in the list </i>
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">
                DotNetFunda is an online tutorial website
            </h4>
        </a>

        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">
                TechFunda
            </h4>

            <p class="list-group-item-text">
                Learn Technologies step by step manner
            </p>
        </a>

        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">
                we can provide you 24*7 support on DotNetFunda and TechFunda
            </h4>

            <p class="list-group-item-text">
                We provide 24*7 support.
            </p>
        </a>
    </div>

Adding custom content

In the above code snippet we have defined how to add the html content in the listgroup. we have taken link tag as <a> and in that we are giving link in the list group and in the next line we are giving html class as <p>in which we are adding the text in that to display the content in the listgroup in the output.

output