Meteor and Bootstrap 5

help
1

How to integrate them together? Is it compatible with Blaze or Bootstrap is kind of replacement of Blaze?

2

Blaze is a front-end framework like React, Vue, Svelt, plain HTML

Bootstrap is a UI/styling layer/library such as: MUI (for React), Chakra, Ant, Semantic etc

You write the <button> in Blaze and style it with Bootstrap CSS classes.
ex:

<button class='btn btn-primary'>Press</button>

The whole line is (can be Blaze). The classes btn and btn-primary are from Bootstrap (Buttons · Bootstrap v5.3)

Ex: Blaze

<div style="width: 100%, maxWidth: 96vh, padding: 16px">
   <div style="width: 50%">
        Content in a column
   <div>
   <div style="width: 50%">
        Content in another column
    </div>
</div>

Same code with Blaze with Bootstrap:

<div class="container">
   <div class="col-xs-12 col-sm-6">
        Content in a column
   <div>
   <div class="col-xs-12 col-sm-6">
        Content in another column
    </div>
</div>

Can’t remember the exact class names but this is pretty much how it works

2 Likes
3

Blaze actually works quite well with Bootstrap. Let me give you an example:

<template name="button">
  <button {{attributes}}>{{label}}</button>
</template>

Template.button.helpers({
  attributes () {
    const data = Template.currentData() // get reactive params
    const btnClass = data.color ?? 'primary' 
    const outlineClass = data.outline ? 'outline-' : ''
    const customClass = data.class ?? ''
    const atts = {}
    atts.id = data.id
    atts.class = `btn btn-${outlineClass}${btnClass} ${customClass}`
    atts.type = data.type ?? 'button'
  
    // add any data-* attribute  
    Object.keys(data).forEach(key => {
      if (key.includes('data-') {
        atts[key] = data[key]
      }
    })

    return atts
  }
})

Usage:

{{> button
    label="Edit"
    color='secondary'
    outline=true
    class="d-block"
    data-target=document._id}}

which renders to a Bootstrap secondary-outline button with block display, referencing some document id

2 Likes
4

Thanks, so bootstrap is just considered by Blaze as external decoration, which can be easily referenced and modified, right?

5

yes, just add its css and js files and you are good to go

1 Like