Simplified Dev

Bootstrap 5 List group constructor() Method

Saurabh's photo
Saurabh
·

3 min read

Bootstrap is a popular front-end programming framework for creating responsive, mobile-first websites and online apps. The list group component of Bootstrap is one of its most powerful features. The list group component is a valuable tool for creating various lists, such as navigation menus, lists of related links, and more.

In Bootstrap 5, the list group component has been enhanced by adding the List group constructor() method. Using JavaScript, developers may construct and initialize new List group items.

Description:

The Bootstrap 5 List group constructor() method is a JavaScript function that is used to create and initialize a new List group element. This function may be used to add a new List group element to the DOM (Document Object Model) or to edit an existing List group element. The function accepts one parameter, an options object used to configure the List group element. The options object can have numerous attributes that allow developers to configure the List group element, such as the items property, which specifies which items will be added to the List group element.

Syntax:

new ListGroup(options)

Where an option is an object with the following properties:

element: The DOM element that will serve as the container for the List group.

items: An array of items to be added to the List group. Each item should be an object with properties like text, active, disabled, badge, href, target and onClick

Examples:

<div id="my-list-group">
</div>

<script>
const listGroup = new ListGroup({
  element: document.getElementById('my-list-group'),
  items: [
    { text: 'Home', href: '#home' },
    { text: 'About', href: '#about' },
    { text: 'Contact', href: '#contact' }
  ]
});
</script>

In the above example, a new List group element is created and added to the DOM using the List group constructor() method. The element is supplied using the options object’s element attribute. The items property specifies which items will be added to the List group element.

Example 2: Modifying an existing List group element

<div id="my-existing-list-group">
  <a class="list-group-item" href="#home">Home</a>
  <a class="list-group-item" href="#about">About</a>
  <a class="list-group-item" href="#contact">Contact</a>
</div>

<script>
const listGroup = new ListGroup({
  element: document.getElementById('my-existing-list-group'),
  items: [
    { text: 'Home', href: '#home', active: true },
    { text: 'Services', href: '#services' },
    { text: 'Contact', href: '#contact' }
  ]
});

<script>
const listGroup = new ListGroup({
  element: document.getElementById('my-existing-list-group'),
  items: [
    { text: 'Home', href: '#home', active: true },
    { text: 'Services', href: '#services' },
    { text: 'Contact', href: '#contact' }
  ]
});
</script>

The result of the previous examples will be a List group element with the provided items and attributes. The first example adds a new List group element to the DOM, whereas the second modifies an existing List group element.

Conclusion:
In conclusion, The Bootstrap 5 List group constructor() system is an important point that allows inventors to produce and modify List group rudiments using JavaScript. This point can be used to produce navigation menus, lists of affiliated links, and more. With its rich set of parcels, inventors can fluently customize their List group rudiments to fit the requirements of their web systems. The system is easy to use and understand, making it a precious addition to any inventor’s toolbox.

JavaScriptCSSBootstrap