Introduction To Bootstrap Paragraph Drupal 8

Bootstrap Paragraph Drupal 8

Paragraphs

Paragraphs are one of the modules that make site builder and end users more powerful. Paragraph module does this by replacing one big WYSIWYG with predefined paragraph types. Paragraph module utilizes entity reference field to reference paragraph types. Paragraphs are basically entities so users get control over fields and theming of the paragraph.

Bootstrap 

Bootstrap is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

A combination of these two is "Bootstrap Paragraph" module.

"The Bootstrap Paragraphs module provides a suite of content and layout Paragraph bundles made with the Bootstrap front-end framework."

Using bootstrap paragraph module, it is very easy to create features like an accordion, modals, tabs, multi column layouts, and many more things. 

The module has multiple dependencies including paragraphs, Entity reference revisions, contact formatter to name a few. The module also needs Bootstrap framework’s js and CSS added in site theme. Installing this module via composer could be beneficial.

Module installation follows a standard process. The module comes with predefined paragraph bundles which can be accessed from /admin/structure/paragraphs_type. These paragraph bundles are divided into 2 main categories: 

Content bundles

  • Simple HTML
  • Image
  • Blank
  • Contact Form
  • Drupal Block
  • View

Layout bundles

  • Accordion
  • Carousel
  • Columns (Even, up to 6)
  • Columns (3 Uneven)
  • Columns (2 Uneven)
  • Modal
  • Tabs

Each paragraph type comes with 2 options: 

Width and background color

Bootstrap Paragraph Drupal 8

Over 50 background colors are already defined. Empty background classes are also available to customize based on your theme. These classes are :

  • .paragraph--color--primary 
  • .paragraph--color--secondary 
  • .paragraph--color--success 
  • .paragraph--color--info 
  • .paragraph--color--warning 
  • .paragraph--color--danger

Predefined width options include following:

  • Tiny - col-4, offset-4
  • Narrow - col-6, offset-3
  • Medium - col-8, offset-2
  • Wide - col-10, offset-1
  • Full - col-12

To use these paragraph bundles, an entity reference field referencing to paragraph needs to be added to a content type. This field can have unlimited value to allow site builders to add as many paragraphs as they want. Once set you can start creating content. With this module, you can place a piece of content in your own structured page.

Additional Features

  • Paragraphs and fields are saved in the database. This means that whatever changes are made in them are also in the database. 
  • Theme CSS gets precedence over module CSS. You can copy template files in theme from a module and overwrite CSS as you desire.
  • The module can be uninstalled without losing paragraphs and CSS. You need to move all templates and CSS to your theme. Remove “attach_library” calls from template files and call CSS from theme’s library.
  • You can use this module to create reusable paragraph bundles via a module.

To summarize, Bootstrap paragraph module is a suite of Paragraph bundles made with the Bootstrap framework. With this module, you can easily position chunks of content (Paragraph bundles) within a structured layout of your own design.

Hope this blog helped you and explore more about Paragraphs also need assistance for Drupal 8 Services then get in touch with us Feel free to share feedbacks.