Bootstrap 5

This project is a Bootstrap 5 implementation of http://getbootstrap.com for the Digital Experience Platform.

Installation

Bootstrap 5 is made of several modules:

• bootstrap5-core: This module contains all assets (CSS and JS files), and also the main mixin bootstrap5mix:component which is used on all bootstrap components.
  This module also contains the component Version that display the embedded version of bootstrap in an alert box, on edit mode.
• bootstrap5-components: This module contains all the modules, definitions, views, and logic.
• bootstrap5-templates-starter: This template set allows you to play with the Bootstrap 5 components. This template set provides an empty page but add the related dependencies, and supports the RTL.

Installation using the Bootstrap 5 package

The easiest way to install Bootstrap 5 on your platform using the package. Please read the dedicated tutorial on https://academy.jahia.com/training-kb/tutorials/administrators/installing-a-module and select the Bootstrap 5 package from the store.

You can also get the latest version of this package directly from the GitHub repository https://github.com/Jahia/bootstrap5/releases/latest Note that there are versions 2.x.x for Jahia 8 and version 1.x.x for Jahia 7.3.

Manual installation

If you want to use the Bootstrap 5 components only, you can install bootstrap5-core and the bootstrap5-components modules to your Jahia, then enable at least the bootstrap5-components modules on your site. Please read the dedicated tutorial on https://academy.jahia.com/training-kb/tutorials/administrators/installing-a-module for more information.

Dependencies

The Bootstrap 5 modules have no external dependencies. Internally, here are the dependencies:

• bootstrap5-core depends on the default module
• bootstrap5-components depends on the bootstrap5-core module
• bootstrap5-templates-starter depends on the bootstrap5-components module

If you want to create your own project and use the Bootstrap 5 components, you simply need to add a bootstrap5-components as a dependency. All components view will import the needed resources (CSS and/or JavaScript file)

---

List of components and documentation

The Bootstrap 5 components module provides a list of components that will allow you to use Bootstrap 5 without thinking about it, as all the logic and syntax will be done automatically.

Accordions

This component builds vertically collapsing accordions in combination with the Bootstrap Collapse JavaScript plugin. more >>

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. more >>

Button

This is a multifunction component that will allow several actions, by creating a button with multiple styles, sizes, and more. more >>

Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. more >>

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel. more >>

Figure and images

Anytime you need to display a piece of content—like an image with an optional caption, consider using a figure. more >>

Layout and Grid

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. more >>

Navbar

The navbar provides simple navigation for your site with sign in options, language switch, and more. more >>

Pagination

Indicate a series of related content exists across multiple pages. more >>

Tabs and pills

Tabs and pills are quasi-navigation components which can highly improve website clarity and increase user experience.

Text

This component provides Bootstrap styles and CK templates more >>

Version

Display an alert in edit mode with the bootstrap version used.

---

Compliance

Starting with version 2.2.0, the bootstrap5-core bundle no longer provides mappings for assets. This means that you will need to ensure that all of your views use one of the following resources for a Bootstrap 5 project:

• bootstrap.min.css
• bootstrap.bundle.min.js

If you suspect that your code or some third-party bundles are still using uncompressed resources such as bootstrap.css or bootstrap.js, and even popper.js or popper.min.js, you may need to add the following mappings in a spring file:

<bean class="org.jahia.services.render.StaticAssetMapping">
    <property name="mapping">
        <map>
            <entry key="bootstrap.css" value="bootstrap.min.css"/>
            <entry key="bootstrap.js" value="bootstrap.bundle.min.js"/>
            <entry key="bootstrap.min.js" value="bootstrap.bundle.min.js"/>
            <entry key="popper.js" value="bootstrap.bundle.min.js"/>
            <entry key="popper.min.js" value="bootstrap.bundle.min.js"/>
        </map>
    </property>
</bean>

For best practice, it is recommended to use the following code when adding Bootstrap 5 resources to your templates:

<template:addResources type="css" resources="bootstrap.min.css"/>
<template:addResources type="javascript" resources="bootstrap.bundle.min.js" targetTag="${renderContext.editMode?'head':'body'}"/>

---

Useful mixin