Bootstrap Lists

This guide will teach you how to use Bootstrap to decorate HTML lists.

You have the ability to generate three different types of HTML lists:

• Unordered lists — A collection of items where the order does not explicitly matter. The list items in unordered lists are identified with bullets, such as ⚬, ●, and so on.
• Ordered lists — A compilation of items where the order explicitly matters. The list items in ordered lists are numbered, e.g., 1, ⅵ, and more.
• Definition list — A set of terms along with their corresponding descriptions.

Refer to the HTML lists tutorial to explore further details about the various list types.

Occasionally, you might need to eliminate the default styling from the list items. This can be achieved by applying the class .list-unstyled to the respective <ul> or <ol> elements.

<ul class="list-unstyled">
   <li>Hotel</li>
   <li>Menu
    <ul>
 <li>biriyani</li>              
 <li>pasta</li>
     </ul>
  </li>
 </ul>

• Try this code

Note: The .list-unstyled class exclusively removes the default list-style and left padding from the list items that are direct children of the <ul> or <ol> element.

To create a horizontal menu using ordered or unordered lists, you need to arrange all list items in a single line, appearing side by side. This can be easily accomplished by adding the class .list-inline to the <ul> or <ol> and the class .list-inline-item to the child <li> elements.

<ul class="list-inline">
        <li class="list-inline-item">Hotel</li>
        <li class="list-inline-item">Menu</li>
        <li class="list-inline-item">About Us</li>
        <li class="list-inline-item">Contact Number</li>
    </ul>

• Try this code

Moreover, the terms and descriptions in a definition list can be aligned horizontally side-by-side using the predefined classes from the Bootstrap grid system. Here's an example:

<dt class="col-sm-3">User Agent</dt>
        <dd class="col-sm-9">Any machine that reads HTML texts is an HTML client agents.</dd>
        <dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
        <dd class="col-sm-9">Website source code which are run by a user's browsers were referred to as client-side scripts in generally.</dd>
        <dt class="col-sm-3">Document Tree</dt>
        <dd class="col-sm-9">the elemental tree that the original text encodes.</dd>
    </dl>

• Try this code

Note: In situations where definition terms are longer, you have the option to utilize the class .text-truncate on the <dt> element to truncate the text with an ellipsis (…).

In the upcoming chapter, you will discover how to create even more flexible and intricate lists of elements using the Bootstrap list group component.

What is a Bootstrap list?

A Bootstrap list is a component in the Bootstrap framework that allows you to present content in a structured and organized manner. It's used to display information in a vertical or horizontal list format. Lists can contain various types of content, such as text, links, and icons, and they play a crucial role in designing user interfaces.

What are the two main types of lists provided by Bootstrap?

Bootstrap provides two main types of lists: unordered lists and ordered lists.

• Unordered Lists: Unordered lists, represented by the <ul> element, display items without a specific sequence or order. Each item is typically marked with a bullet point or other symbol.
• Ordered Lists: Ordered lists, represented by the <ol> element, display items in a specific sequential order, usually with numbers or letters to indicate the order of items.

How can you create an unordered list in Bootstrap?

To create an unordered list in Bootstrap, you can use the <ul> element along with the class list-unstyled to remove default list styling:

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

By using the list-unstyled class, you can remove the default bullet points and indentation from the list items.

What if you want to create a list with custom content like icons or badges?

Bootstrap allows you to create lists with custom content using the list-group component. This component lets you add various types of elements within each list item, such as text, icons, images, and badges:

<ul class="list-group">
  <li class="list-group-item">Text only item</li>
  <li class="list-group-item">
    <h5 class="mb-1">Item with heading</h5>
    <p class="mb-1">Some description text here.</p>
    <span class="badge badge-primary">Badge</span>
  </li>
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">Flex item</h5>
      <small>Secondary text</small>
    </div>
  </li>
</ul>

How can you create an ordered list with Bootstrap?

To create an ordered list in Bootstrap, use the <ol> element and apply the desired list style using Bootstrap's utility classes:

<ol class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

You can also customize the numbering style by using Bootstrap's utility classes.

How can you make a horizontal list with Bootstrap?

To create a horizontal list in Bootstrap, you can use the list-inline class along with the <ul> element:

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

The list-inline class will display the list items horizontally without bullet points.

How can you add icons to list items in an unordered list in Bootstrap?

You can add icons to list items by using the list-group-item class along with the list-group-item-icon class. For example:

<ul class="list-group">
  <li class="list-group-item">
    <span class="list-group-item-icon"><i class="fas fa-check"></i></span> Item 1
  </li>
  <li class="list-group-item">
    <span class="list-group-item-icon"><i class="fas fa-star"></i></span> Item 2
  </li>
</ul>

How can you create a Bootstrap ordered list with Roman numerals?

To create an ordered list with Roman numerals in Bootstrap, you can use the list-group class and add list-group-roman to the list items. Here's an example:

<ol class="list-group">
  <li class="list-group-item list-group-roman">Item I</li>
  <li class="list-group-item list-group-roman">Item II</li>
</ol>

How can you create a Bootstrap ordered list with custom start values for numbering?

You can set custom start values for numbering in an ordered list by using the start attribute on the <ol> element. For example:

<ol class="list-group" start="5">
  <li class="list-group-item">Item 5</li>
  <li class="list-group-item">Item 6</li>
</ol>

How can you create a Bootstrap ordered list with uppercase alphabetical characters?

To create an ordered list with uppercase alphabetical characters in Bootstrap, use the list-group class and add list-group-uppercase-alpha to the list items. Example:

<ol class="list-group">
  <li class="list-group-item list-group-uppercase-alpha">Item A</li>
  <li class="list-group-item list-group-uppercase-alpha">Item B</li>
</ol>

How can you create a Bootstrap ordered list with custom type attributes?

You can use the type attribute to specify the type of numbering or bullet for ordered and unordered lists in Bootstrap. For example:

<ul class="list-group">
  <li class="list-group-item" type="disc">Item 1</li>
  <li class="list-group-item" type="square">Item 2</li>
</ul>

How can you create a flush (borderless) unordered list in Bootstrap?

To create a borderless and clean list, use the .list-group class with the list-group-flush class to the <ul> element. Example:

<ul class="list-group list-group-flush">
  <li class="list-group-item">Flush Item 1</li>
  <li class="list-group-item">Flush Item 2</li>
</ul>

What is a badge in Bootstrap lists, and how can you add it?

A badge is a small, colored label you can add to list items using the badge class. Example:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 1
    <span class="badge badge-primary badge-pill">5</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 2
    <span class="badge badge-secondary badge-pill">3</span>
  </li>
</ul>

How can you create a responsive Bootstrap list?

To make a list responsive, you can use Bootstrap's responsive classes such as list-group-horizontal for horizontal lists and list-group-horizontal-sm for small screens. Example:

<ul class="list-group list-group-horizontal list-group-horizontal-sm">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ul>

How do you highlight a list item using the primary background color?

Add the list-group-item-primary class to the list item. Example:

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Highlighted Item</li>
  <li class="list-group-item">Regular Item</li>
</ul>

How do you emphasize caution with a warning background color?

Add the list-group-item-warning class to the list item. Example:

<ul class="list-group">
  <li class="list-group-item list-group-item-warning">Caution Item</li>
  <li class="list-group-item">Regular Item</li>
</ul>

Bootstrap offers a versatile set of tools and classes for creating and customizing unordered lists and ordered lists that cater to various web design and content organization needs. These lists can be styled and structured to provide a visually appealing and user-friendly presentation of information, making Bootstrap a versatile framework for web designers and developers.

The framework allows for customizing list items, enabling you to personalize the design of your lists to fit your specific requirements. You can create bulleted lists and numbered lists, each with its own unique styling and appearance. Bootstrap also supports the creation of responsive lists, ensuring that your lists adapt seamlessly to various devices and screen sizes, thanks to its responsive classes.

The availability of list classes in Bootstrap simplifies the development process, making it easier to create and maintain lists. Additionally, you can create collapsible lists, allowing you to save space and provide a more structured user experience. Bootstrap offers the flexibility to customize list layouts, allowing you to create organized and visually engaging lists that suit your website's design. This customization extends to nested lists, which can help organize content hierarchically.

Moreover, the inclusion of numbered and bulleted lists enables you to present your content in an organized and visually appealing manner while effectively organizing your content. With Bootstrap, you can go beyond traditional list structures and enhance your lists with the addition of icons and badges. This integration of icons and badges elevates the visual appeal and interactivity of your lists, making them more engaging and informative.