Overview

Some Meteor Blaze templates to speed up layout development for Bootstrap 3 & Bootstrap 4.

Installation

meteor add imajus:bootstrap-helpers

Related packages

• imajus:common-helpers
• imajus:html-helpers
• imajus:string-helpers

Contents

Package provide different sets of templates for Bootstrap 3 and Bootstrap 4.

Bootstrap 3

Following helpers are provided for Bootstrap 3:

• {{> breadcrumbs items=Array}} – Outputs breadcrumbs component. Expects items array of objects with following structure:

1{
2  // Item text
3  label: String,
4  // (optional) <li> attributes
5  liAtts: Object,
6  // (optional) <a> src attribute value, if not provided a label will be displayed as static text
7  href: String,
8  // (optional) Additional anchor attributes, skipped if href is not provided
9  anchorAtts: Object,
10}

• {{> carousel items=Array}} - Outputs carousel component.
• {{> icon bs=String fa=String}} - Outputs Bootstrap 3 or FontAwesome icon.

bs has no effect when used with Bootstrap 4.

• {{#collapse id=String active=Boolean title=String}}...{{/collapse}} - Outputs collapse component.
• {{#modal id=String title=String close=String submit=String options=Object}}...{{/modal}} - Outputs modal component. Initially, modal is hidden and you suppose to call $('#myModal').modal('show') in order to display it. options are passed to Bootstrap modal initialization method as is, e.g. passing variable which contains object { show: true } will make modal to appear right after rendering.

1{{> modal id='myModal' title='My modal' close='Dismiss' submit='OK' options=modalOptions}}
2  <p>Custom modal content goes here.</p>
3  <p>"modalOptions" must be an object or Template helper which returns an object</p>
4{{/modal}}

• {{#pageHeader}}...{{/pageHeader}} - Outputs page header component.

Only available for Bootstrap 3.

• {{#panel id=String type=String title=String badge=String}}...{{/panel}} - Outputs panel component.

Only available for Bootstrap 3.

Bootstrap 4

By default, the package works with Bootstrap 3 layout. If you need to switch to Bootstrap 4, put this somewhere in your client initialization logic (before it starts rendering any templates):

1import { BootstrapHelpers } from 'meteor/imajus:bootstrap-helpers';
2BootstrapHelpers.forBootstrap4 = true;

Following helpers are provided for Bootstrap 4:

• {{#modal id=String title=String modalClass=String closeBtnLabel=String clostBtnType=String submitBtnLabel=String submitBtnType=String noHeader=Boolean noHeaderClose=Boolean noFooter=Boolean options=Object}}...{{/modal}} - Outputs modal component. Parameters closeBtnLabel, closeBtnType, submitBtnLabel, submitBtnType, noHeader, noHeaderClose, noFooter are all optional and allows to tune modal appearence for your needs. You can adjust modal dialog classed using dialogClasses parameter.

Initially, modal is hidden and you suppose to call $('#myModal').modal('show') in order to display it. options are passed to Bootstrap modal initialization method as is, e.g. passing variable which contains object { show: true } will make modal to appear right after rendering.

1{{> modal id='myModal' title='My modal' closeBtnLabel='Dismiss' submitBtnLabel='OK' options=modalOptions}}
2  <p>Custom modal content goes here.</p>
3  <p>"modalOptions" must be an object or Template helper which returns an object</p>
4{{/modal}}