Bootstrap lists
In Bootstrap Lists style you will learn how to style HTML lists with Bootstrap and how to use these list Styles.
Defined HTML Lists With Bootstrap-
There are three different types of HTML lists and each one has a specific meaning and purpose. HTML list is used to present a list of information in a semantic way and well-formed.
Order Lists:- these list items in specific ordered lists which are marked with numbers means that order list used to group a set of related items in a specific order.
An ordered list group starts with the <ol> tag and each list item starts with the <li> tag.
the list item will be marked with numbers, By default,
Unordered Lists:- The related Lists items in no particular order. the list item in unordered lists is marked with bullets.
An unordered list starts with the <ul> tag. each list item starts with the <li> tag.
By default, the list item will be marked with the bullets (such as small black circles)
Description list:- A list of terms with their associated descriptions means that a description list is a list of terms, with a description of each term.
the <dl> the tag defines the description list, the <dt> the tag defines the term (name), and the <dd > the tag describes each term:
Unordered Lists and Unstyled Ordered
when you Build your blog or website sometime you need to remove default styling list item. In that condition apply the class .list-unstyled to the respect <ul> or <ol> elements.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul class="list-unstyled"> <li>Television</li> <li>Smart Phone <ul> <li>Samsung</li> <li>Nokia</li> <li>Micromax</li> </ul> </li> <li>Home Threator</li> <li>Refrigrator</li> </ul> |
The output result will look something like this.
- Television
- Smart Phone
- Samsung
- Nokia
- Micromax
- Home Theater
- Refrigerator
Creating Horizontal Definition Lists
you want to create the Horizontal definition lists you can be aligned horizontal side by side using the most powerful framework Bootstrap grid systems predefined classes.
|
1 2 3 4 5 6 7 8 |
<dl class="row"> <dt class="col-sm-2">Technology</dt> <dd class="col-sm-8">Reference site about Lorem Ipsum, giving information.</dd> <dt class="col-sm-2 text-truncate">web Hosting</dt> <dd class="col-sm-8">Reference site about Lorem Ipsum, giving information.</dd> <dt class="col-sm-2">language</dt> <dd class="col-sm-8">Reference site about Lorem Ipsum, giving information.</dd> </dl> |
The Horizontal Definition Lists Result will look something like this.
- Technology
- Reference site about Lorem Ipsum, giving information.
- web Hosting
- Reference site about Lorem Ipsum, giving information.
- language
- Reference site about Lorem Ipsum, giving information.
Unordered List and Placing Ordered Items Inline
Unordered List and placing Ordered items inline used when you want to create a Horizontal Menu bar you need to place all menubar list items in a single line such as side by side then apply the simple class .list-inline to the respective <ul> or <ol> and used the class .list-inline-item to the <li> elements.
|
1 2 3 4 5 6 7 |
<ul class="list-inline"> <li class="list-inline-item">Home</li> <li class="list-inline-item">About us</li> <li class="list-inline-item">Technology</li> <li class="list-inline-item">Gallery</li> <li class="list-inline-item">Contact us</li> </ul> |
The Result will look something like this.
- Home
- About us
- Technology
- Gallery
- Contact us
About Author
