Templates

So long as the markup matches the bootstrap 5.3 spec, components will render as expected, including css modifications we have added to match designs.

Typically in Drupal markup is defined in twig files, and can be added to essentially any component displayed in Drupal, using templates matched to the naming conventions expected for that component.

We have added a number of starter bootstrap templates, some collected from modules or contrib themes, others created from scratch, and listed current inclusions here

 

Views

Components available via views modes:

Field groups

Components available via Field groups

  • Bootstrap horizontal form
  • Bootstrap grid
  • Bootstrap Scrollspy
  • Bootstrap Tabs classic
  • Bootstrap toast
  • Bootstrap tab navigation
  • Bootstrap Offcanvas
  • Bootstrap Table
  • Bootstrap popovers
  • Bootstrap multistep
  • Bootstrap Accordion
  • Bootstrap Modal
  • Bootstrap card
  • Bootstrap toggle

Field display modes

  • Link overrides:
    • Button with Icon
    • Coloured Button

Example block types

  • Accordion
  • Card Group (with Card paragraph type)
  • Carousel (with Carousel item paragraph type)
  • Embed 
  • Form     
  • Gallery     
  • Hero 
  • Newsletter 
  • Quote     
  • Side-by-side     
  • Text (Full HTML input)
  • Tabs

Example content types

  • Datacard

Example paragraph types

  • Button with Icon
  • Coloured Button
  • Card
  • Carousel item
  • Tabs

TWIG

Extending templates

New templates can be added to the /templates folder of any component directory in the theme, so long as they follow expected naming conventions and they will be processed and used.

Blocks: 

  • block--[module]--[delta].html.twig
  • block--[module].html.twig
  • block.html.twig


Layout builder blocks: 

  • block--inline-block--[block-type].html.twig
  • block--inline-block.html.twig
  • block--[block-type].html.twig
  • block--layout-builder.html.twig
  • block.html.twig

Nodes: 

  • node--[nodeid]--[viewmode].html.twig
  • node--[nodeid].html.twig
  • node--[content-type]--[viewmode].html.twig
  • node--[content-type].html.twig
  • node--[viewmode].html.twig
  • node.html.twig

Taxonomy terms: 

  • taxonomy-term--[tid].html.twig
  • taxonomy-term--[vocabulary-machine-name].html.twig
  • taxonomy-term.html.twig

Fields:

  • field--node--[field-name]--[content-type].html.twig
  • field--node--[field-name].html.twig
  • field--node--[content-type].html.twig
  • field--[field-name].html.twig
  • field--[field-type].html.twig
  • field.html.twig

Search result:

  • search-result--[search-type].html.twig

Views:

  • views-view--[viewid]--[view-display-id].html.twig
  • views-view--[viewid]--[view-display-type].html.twig
  • views-view--[view-display-type].html.twig
  • views-view--[viewid].html.twig
  • views-view.html.twig

Views Fields:

  • views-view-field--[viewid]--[view-display-id]--[fieldid].html.twig
  • views-view-field--[viewid]--page--[fieldid].html.twig
  • views-view-field--block--[fieldid].html.twig
  • views-view-field--[fieldid].html.twig
  • views-view-field.html.twig

Media:

  • media--source-[source-id].html.twig
  • media--[media-type]--[view-mode].html.twig
  • media--[media-type].html.twig
  • media--[view-mode].html.twig
  • media.html.twig