Bootstrap4 Components
This is a Bootstrap 4 implementation for Jahia.
Here are some videos (in French with English subtitles) about how to install a Jahia DX to work with the Bootstrap 4 modules and to use all components: https://www.youtube.com/playlist?list=PLqvxx55Om13GwusvlYSmH-O2xu1TSQnUv
Video
Screenshots
How to install
You first need to install this dependency (external modules):
- Popper.js: available on the store https://store.jahia.com/module/popperjs
Then you can deploy the modules bootstrap4-core and bootstrap4-components.
- Watch the video that explains the installation process
- Watch the video that explains how to install an empty template set
You can also install the full package in one click from your Jahia administration.
WARNING: Migration to Bootstrap 4 v2.5.0 or v4.6.0
Please read carefully this part if you update Bootstrap 4 v2.5.0 / v4.6.0. We did refactor the Layout / Grid component by renaming the generated areas.
From version v2.5.0/ v4.6.0 of Bootstrap 4 component, the contentList above a Layout / Grid component do not contain the systemName of the grid anymore. As a result, you will be able to copy/paste or rename a Layout / Grid component without losing the content (or having ghost content).
This feature is only working on site content (not for Layout / Grid component created in the studio)
How to apply this refactoring?
A groovy script has been made to refactor existing content. To execute this script, go to the Groovy Console (via the tools http://localhost:8080/tools). The name of the script is grid-rename.groovy
First, you can execute this script to test it without checking the Apply refactoring. It will list the nodes that will need to be updated. Then, you can check the Apply refactoring to save the updates by on the default workspace.
If you get an error during script execution, have a look at the console to get the list of nodes to manually publish. Then you can try to run the script again until there is no more errors.
What is done on this script?
This script executes a query on your default repository and check on all Layout / Grid nodes if we need to rename the sub-nodes of type contentList to remove the grid systemName.
What is not done with this script grid-rename.groovy?
This script updates the default workspace and publish nodes without pending modifications. All nodes with pending modification need to be manually published to be visible in live.
How to migrate from a 1.x Bootstrap 4 version
We did refactor the Layout / Grid component by moving the Grid part to the Create Row.
As a result, when you want to create some columns, you will need to check the Create Row / Columns checkbox and then select the type of grid that you want to use (Predefined or Custom).
How to apply this refactoring?
A groovy script has been made to helps you refactoring existing content. To execute this script, go to the Groovy Console (via the tools http://localhost:8080/tools). The name of the script is grid-refactoring.groovy
First, you can execute this script to test it without checking the Apply refactoring. It will list the nodes that will need to be updated. Then, you can check the Apply refactoring to save the updates by on the default workspace.
What is done on this script?
This script executes a query on your default repository and checks on all Layout / Grid nodes if they use a Predefined or a Custom grid type, and set the right type on the Create Row mixin.
What is not done with this script?
Publication
This script updates the default workspace and publishes nodes without pending modifications; you will need to publish some nodes manually. Note that the publication is not mandatory; the output should be correct on Live even if you don't execute the groovy script.
Templates and other modules
You will also need to update all your modules or templates set that uses the Layout / Grid module, and if you were using the legacy grid, you will need to check the Create Row / Column checkbox and select the right grid type.
List of components
Breadcrumb
Indicate the current page’s location within a navigational hierarchy.
Get more about breadcrumb on https://getbootstrap.com/docs/4.1/components/breadcrumb/
Button
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
Button action can be
- An internal or an external link
- A collapsible content
- A modal (dialog prompts)
- A popover
Get more about buttons at https://getbootstrap.com/docs/4.1/components/buttons/
- Watch the video that shows how to use the buttons
Card
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards replace our old panels, wells, and thumbnails in Bootstrap 3.
Get more about cards at https://getbootstrap.com/docs/4.1/components/card/
- Watch the video that shows how to use the cards
Carousel
The carousel is a slideshow for cycling through a series of content
Get more about carousels at https://getbootstrap.com/docs/4.1/components/carousel/
- Watch the video that shows how to use the carousel
Figure
Anytime you need to display a piece of content—like an image with an optional caption, consider using a figure.
Get more about figures at https://getbootstrap.com/docs/4.1/content/figures/
- Watch the video that shows how to use a figure
Grid
Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range.
Get more about grids and containers at https://getbootstrap.com/docs/4.1/layout/overview/ and https://getbootstrap.com/docs/4.1/layout/grid/
- Watch the video that shows how to use the grids
Media object
The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media.
Get more about media objects at https://getbootstrap.com/docs/4.1/layout/media-object/
- Watch the video that shows how to use a media object
Navbar
The navbar provides a simple navigation for your site
Get more about navbars at https://getbootstrap.com/docs/4.1/components/navbar/
- Watch the video that shows how to use the navbar
Pagination
Pagination links indicate a series of related content exists across multiple pages.
Get more about pagination at https://getbootstrap.com/docs/4.1/components/pagination/
- Watch the video that shows how to use a pagination
Text
This component provides bootstrap 4 styles and CK templates
Get more about typography at https://getbootstrap.com/docs/4.1/content/typography/ and https://getbootstrap.com/docs/4.1/content/code/ and https://getbootstrap.com/docs/4.1/content/tables/
- Watch the video that shows how to use the CK text component
Version
Adds a div describing the bootstrap version used.
A full integration
In the next video, you will see how to use the Bootstrap4 modules for a complete template set integration
- Watch the video that shows how to make an integration
- Get the template set used for this integration
FAQ
Is it a supported version?
Well, this module is a community module and you can be used at your own risk (the is a limited risk ;-)
Feel free to use it and please report any issues on the GitHub page https://github.com/Jahia/bootstrap4
You can also create a Pull Request if you want to improve this module!
The MIT License (MIT)
Copyright (c) 2017-2020 Philippe Vollenweider, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.