articles

Bootstrap Lists

Anonymous User9852 19-Aug-2014

In this article, I’m explaining Bootstrap lists. Twitter bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. Twitter bootstrap list can be well designed you can style your lists just adding some classes to your list.

Twitter Bootstrap framework is using to design front-end of web page. When start to make application there are many things that are required in nearly every project. For example Grid, Table, Navbar, Label, Alert, Buttons and so on. These are the common things of things of any project. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.

Creating Lists With Twitter Bootstrap
You can define the three different types of lists:
  • Unordered lists — A list of items in which the order does not explicitly matter.

       The list items in unordered lists are marked with bullets.

  • Ordered lists — A list of items in which the order does explicitly matter. The list

       items in ordered lists are marked with numbers.

  • Definition list — A list of terms with their associated descriptions.
Example
<div class="container" style="width: 50%;">
    <ul>
        <li>Home</li>
        <li>Products
            <ul>
                <li>MindStick Cleaner</li>
                <li>MindStick DataConverter</li>
                <li>MindStick UnitConverter</li>
            </ul>
        </li>
        <li>Career</li>
        <li>Contact Us</li>
    </ul>
</div>

 The html will render without bootstrap

Bootstrap Lists

Creating Lists With Twitter Bootstrap


To make the list  more attractive using Bootstrap.

  1. list-unstyled
  2. list-inline
  3. List Groups

 

 

1. list-unstyled  


Now first we use the ist-unstyled class with ul tag to remove the default styling

form the list items.

<div class="container" style="width: 50%;">
    <ul class="list-unstyled">
        <li>Home</li>
        <li>Products
            <ul>
                <li>MindStick Cleaner</li>
                <li>MindStick DataConverter</li>
                <li>MindStick UnitConverter</li>
            </ul>
        </li>
        <li>Career</li>
        <li>Contact Us</li>
    </ul>
</div>

The html will render with bootstrap class list-unstyled.

Bootstrap Lists

2. list-inline


If you want to create a horizontal menu using an ordered or unordered list then

you need to place all list items in a single line, in other words side by side.

<div class="container" style="width: 50%;">
    <ul class="list-inline">
        <li>Home</li>
        <li>Career
        </li>
        <li>Products</li>
        <li>Contact Us</li>
    </ul>
</div>

The html will render with bootstrap class list-inline.

Bootstrap Lists

3. List Groups


The list groups class is used to display lists of items in a beautiful manner. To do

that you can use a list-group-item class with every item.

<div class="container" style="width: 50%;">
    <ul class="List Groups">
        <li class="list-group-item active">Home</li>
        <li class="list-group-item">Career        
        <li class="list-group-item">Products</li>
        <li class="list-group-item">Contact Us</li>
    </ul>
</div>

The html will render with bootstrap class List Groups.

Bootstrap Lists

 If you learn more about List in bootstrap go here


Updated 23-Dec-2019
I am a content writter !

Leave Comment

Comments

Liked By