Bootstrap 5.3.8

Bootstrap is released under the MIT license. When using Bootstrap in your projects, you must adhere to the following conditions:

Requirements

• Keep notices intact: You must retain the license and copyright notice included in Bootstrap’s CSS and JavaScript files when using them in your works.

Permissions

• Commercial & Private Use: You can freely download and use Bootstrap (in whole or in part) for personal, private, company internal, or commercial purposes.
• Distribution: You can use Bootstrap in packages or distributions that you create.
• Modification: You are permitted to modify the source code.
• Sublicensing: You can grant a sublicense to modify and distribute Bootstrap to third parties.

Prohibitions

• No Liability: You cannot hold the authors, license owners, or copyright holders liable for damages; Bootstrap is provided without warranty.
• No Improper Attribution: You cannot redistribute any piece of Bootstrap without proper attribution.
• No Endorsement Claims: You cannot use Bootstrap's marks in a way that implies Bootstrap endorses your distribution, or implies that you created the Bootstrap software.

What is NOT required

• No Source Disclosure: You are not required to include the source of Bootstrap (or your modifications) in your redistribution.
• No Forced Contributions: You are not required to submit your changes back to the Bootstrap project (though it is encouraged).

Bootstrap supports the latest, stable releases of all major browsers and platforms. This includes desktop browsers and the default browsers for major mobile platforms.

Mobile Support

Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (e.g., Opera Mini, UC Browser Mini, Amazon Silk) are not supported.

Desktop Support

Note: For Firefox, Bootstrap supports both the latest normal stable release and the latest Extended Support Release (ESR).

Bootstrap follows several guiding principles to ensure components are easy to customize, extend, and maintain:

• Mobile-first & Responsive: Styles use min-width media queries to apply styles as viewports grow, reducing the need for CSS overrides.
• Base & Modifier Classes: Components use a base class for shared properties (e.g., .btn) and modifier classes for variations (e.g., .btn-primary).
• Class-based Selectors: Styles avoid type selectors (like input[type="text"]) and nested parent selectors to keep specificity low and overrides easy.
• HTML/CSS over JS: Prefer native browser functionality (like :valid/:invalid pseudo-classes) and HTML data attributes for JS plugins over custom JavaScript logic.
• Utility-first: Use utility classes (single property-value pairs like .d-block) to reduce custom CSS bloat and improve performance.
• Flexible HTML: Avoid strict HTML requirements and immediate children selectors (>) to allow for more flexible implementations.

The Accordion component is built on top of the Collapse JavaScript plugin. It uses the collapse plugin internally to manage the expanding and collapsing of content sections. To render an accordion item that is expanded by default, you must:

1. Add the .show class to the .accordion-collapse element.
2. Remove the .collapsed class from the .accordion-button element.
3. Set the aria-expanded attribute to true on the .accordion-button.

Standard accordion items use the data-bs-parent attribute on the .accordion-collapse element to ensure that opening one item automatically closes others within the same parent container.

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          Content goes here.
        </div>
      </div>
    </div>
  </div>

Bootstrap uses a predefined z-index scale to manage the layering of components like navigation, tooltips, popovers, and modals. This ensures that overlays appear in the correct visual order (e.g., a modal appearing above a navbar).

Key Principles

• Standardized Scale: Bootstrap uses a specific set of high values for layered components to avoid conflicts between different UI elements.
• Avoid Individual Customization: It is strongly discouraged to customize individual z-index values. If you need to change the layering behavior, you should update the entire scale to maintain consistency across all components.
• Low-level Z-index for Borders: For handling overlapping borders (such as in input groups or button groups), Bootstrap uses low single-digit values (1, 2, and 3) to manage default, hover, and active states. This ensures that borders are correctly displayed when an element is hovered, focused, or active.