BootstrapHow-ToBeginner · 4 min read

How to Initialize Bootstrap Components Correctly

To initialize a Bootstrap component, first include Bootstrap's CSS and JavaScript files, then create the HTML markup for the component. Finally, use new bootstrap.ComponentName(element) in JavaScript to activate it, where ComponentName is the specific component like Modal or Tooltip.

📐

Syntax

Bootstrap components are initialized by creating a new instance of the component's JavaScript class. The general syntax is:

new bootstrap.ComponentName(element, options)

Here:

ComponentName is the name of the Bootstrap component (e.g., Modal, Tooltip, Dropdown).
element is the DOM element that represents the component.
options is an optional object to customize the component behavior.

javascript

const myComponent = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false });

💻

Example

This example shows how to initialize and show a Bootstrap modal using JavaScript.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Modal Initialization</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Modal HTML -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Welcome</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hello! This modal was initialized with JavaScript.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Button to trigger modal -->
<button id="openModalBtn" class="btn btn-primary">Open Modal</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const modalElement = document.getElementById('myModal');
  const myModal = new bootstrap.Modal(modalElement);
  document.getElementById('openModalBtn').addEventListener('click', () => {
    myModal.show();
  });
</script>

</body>
</html>

Output

A webpage with a button labeled 'Open Modal'. When clicked, a modal window appears with the title 'Welcome' and a message 'Hello! This modal was initialized with JavaScript.' The modal can be closed with a close button.

⚠️

Common Pitfalls

Not including Bootstrap's JavaScript file will prevent components from working.
Using the wrong element selector or missing the element causes errors.
Trying to initialize a component multiple times on the same element can cause unexpected behavior.
For some components, you must call methods like show() or hide() after initialization to see effects.

javascript

/* Wrong: Missing Bootstrap JS file */
// The modal won't open because Bootstrap's JS is not loaded.

/* Correct: Include Bootstrap JS and initialize */
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const modal = new bootstrap.Modal(document.getElementById('myModal'));
  modal.show();
</script>

📊

Quick Reference

Here is a quick summary of how to initialize some common Bootstrap components:

Component	Initialization Syntax	Common Method
Modal	new bootstrap.Modal(element, options)	show(), hide()
Tooltip	new bootstrap.Tooltip(element, options)	show(), hide(), dispose()
Dropdown	new bootstrap.Dropdown(element, options)	toggle(), show(), hide()
Popover	new bootstrap.Popover(element, options)	show(), hide(), dispose()
Carousel	new bootstrap.Carousel(element, options)	next(), prev(), pause()

✅

Key Takeaways

Always include Bootstrap's CSS and JavaScript files before initializing components.

Initialize components by creating a new instance with new bootstrap.ComponentName(element).

Use the component's methods like show() or toggle() to control behavior after initialization.

Ensure the element exists in the DOM before initializing to avoid errors.

Avoid initializing the same component multiple times on the same element.