Home > DeveloperSection > Articles > Bootstrap Lists

Bootstrap Lists


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 3258  View(s)
Rate this:

Bootstrap Lists

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="width50%;">

    <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="width50%;">

    <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="width50%;">

    <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="width50%;">

    <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


Don't want to miss updates? Please click the below button!

Follow MindStick