Creating Lists With Bootstrap
You can create three different types of HTML 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, e.g. ⚬, ●, etc.
- Ordered lists — A list of items in which the order does explicitly matter. The list items in ordered lists are marked with numbers, e.g. 1, ⅵ, etc.
- Definition list — A list of terms with their associated descriptions.
See the tutorial on HTML lists, to learn more about the different lists types.
Unstyled Ordered and Unordered Lists
Sometimes you might need to remove the default styling form the list items. You can do this by simply applying the class .list-unstyled
to the respective <ul>
or <ol>
elements.
Example
<ul class="list-unstyled">
<li>Home</li>
<li>Products
<ul>
<li>Gadgets</li>
<li>Accessories</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
— The output of the above example will look something like this:
Note: The .list-unstyled
class removes the default list-style
and left padding
only from the list items which are immediate children of the <ul>
or <ol>
element.
Placing Ordered and Unordered List Items Inline
If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class .list-inline
to the <ul>
or <ol>
, and the class .list-inline-item
to the child <li>
elements.
Example
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Products</li>
<li class="list-inline-item">About Us</li>
<li class="list-inline-item">Contact</li>
</ul>
— The output of the above example will look something like this:
Creating Horizontal Definition Lists
The terms and descriptions in a definition list can also be aligned horizontally side-by-side using the Bootstrap grid system’s predefined classes. Here’s an example:
Example
<dl class="row">
<dt class="col-sm-3">User Agent</dt>
<dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>
<dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
<dd class="col-sm-9">Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.</dd>
<dt class="col-sm-3">Document Tree</dt>
<dd class="col-sm-9">The tree of elements encoded in the source document.</dd>
</dl>
— The output of the above example will look something like this:
Leave a Reply