Bootstrap4 Components icon
Module Id
bootstrap4-components
Group Id
org.jahia.modules
Updated
Requires Jahia
7.2.0.1
Author
Philippe Vollenweider
Category
Marketing
Status
PRERELEASED

Bootstrap4 Components offline_pin

templates bootstrap layout

This is a Bootstrap 4 implementation for Digital Experience Manager. This version is a draft based on the beta 3 version of Bootstrap 4. This is an unsupported version, also not compliant with the official bootstrap 3 version.

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

Dependencies & Dependants

Dependants
  • NONE

Changelog 0.13

Update to v4.0.0-beta.3

How To Install

You first need to install this 2 dependence (external modules):

Then you can deploy the modules bootstrap4-core and bootstrap4-components. As there is no official release yet so you can download a pre-release directly from https://github.com/Jahia/bootstrap4

- Watch the video that explains the installation process
- Watch the video that explains how to install an empty template set


List of components

Breadcrumb

Indicate the current page’s location within a navigational hierarchy.

Get more about breadcrumb on https://getbootstrap.com/docs/4.0/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.0/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.0/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.0/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.0/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.0/layout/overview/and https://getbootstrap.com/docs/4.0/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.0/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.0/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.0/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.0/content/typography/ and https://getbootstrap.com/docs/4.0/content/code/ and https://getbootstrap.com/docs/4.0/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  

Images

Video