Bootstrap Buttons with Javascript

Bootstrap is great, especially now that Version 5 is out.  At MindSpun, we used it to build our default Ghost theme Spin and our admin dashboard, plus a slew of other projects.

However…

One thing we really hoped would be better was real support for Bootstrap CSS custom properties (e.g. CSS variables). Bootstrap 5 has them – but really, they’re just read-only values.

Which means you can’t do the one thing you really want to do – change them in Javascript and see the site style update live.

And one place we always seem to see this happening is also the place we wish we didn’t – Buttons.

Buttons are essential for grabbing your users attention, building CTA’s, and getting visitors to take action on your site.

So being able to customize them freely and with ease is a pretty big deal.

Our new Bootstrap-js-buttons package makes building buttons fast and straightforward, while still letting you control the things that matter.

The Bootstrap-JS-buttons library.

The Bootstrap-js-buttons package library provides a single, flexible interface for all your button styling. It gives you the power of an advanced Javascript framework that works seamlessly with the simplicity and accessibility of Bootstrap’s framework.

It also tackles SoC, by keeping your element generation separate from the styling, and allowing it to be dynamically altered, so you never have to worry about buttons again.

Features Included in Bootstrap-JS-buttons

We’ve made it possible (and painless!) to implement Bootstrap theming, including features like light/dark theme stylings, which are usually a total drag with Bootstrap CSS custom properties (but nearly impossible without them)

We’ve also solved the problem of static buttons.

Creating new button styles with static buttons requires you to define them in SASS using a mixin – and you can’t pass a CSS custom property to it because the SASS functions used are only available at build time.

We’ve worked around this problem by adding powerful functionality to Bootstrap which lets you leverage Bootstrap CSS custom properties to define the button styles easily, dynamically and in real-time.

Dynamic themes with Bootstrap

Bootstrap-js-buttons is especially great for Web 2.0 sites because it allows for complete flexibility in defining your buttons.

With Javascript included directly in the styling, you can easily customize call-to-actions, menus or footers.

This allows you to create extremely flexible Bootstrap theming, that can be molded however you want with just a few function calls. (No more long lists of variables!)

Our library facilitates theming by converting the standard BS5 method of dynamic styling – which uses the manual SASS variables – into a minimal Javascript interface exposed through two functions – for both standard and outlined buttons.

This means our library gives you a standardized, readable way to code your buttons.

The Bootstrap-js-buttons package also allows you to create Bootstrap buttons with a little bit of Javascript for an even more dynamic theme.

For instance – when a user changes a color – the button style changes – it’s that easy. (Try it in the live demo above!)

Package Functions

The package contains two functions corresponding to the two Bootstrap button mixins for defining button variants:

• bs.buttonVariant()
• bs.buttonVariantOutline()

Calling one of these functions in JS defines a button with the given style. Calling it again redefines that style.

All of the standard BS5 configuration (the global SASS variables that you’d normally specify in _variables.scss) is passed to each function using the options parameter.

And the options parameters include all the SASS variables for button styling available in Bootstrap, allowing you to customize your buttons any way you want.

The new Bootstrap-js-buttons package

The new Bootstrap-js-buttons package just makes life easier. You can include it in your Javascript wherever you need to render a button, without having to worry about the underlying scripting, mixins, or Bootstrap features.

The buttons generated by the functions are also fully dynamic, so the user can control the styling based on their own preferences, without the developer lifting a finger (which is definitely a feature we wish wasn’t missing from Bootstrap!))

Want to see for yourself? Give it a try on the live demo above!

Available on GitHub, NPM and jsDelivr

https://github.com/getmindspun/bootstrap-js-buttons

https://www.npmjs.com/package/bootstrap-js-buttons

CDN via jsDelivr

<script src="https://cdn.jsdelivr.net/npm/bootstrap-js-buttons@latest/dist/bootstrap-js-buttons.min.js"></script>