Bootstrap-Vue Switch Style Checkbox: doesn't show custom control toggle

Question

I'm reading through the documentation here for switch style checkboxes: https://bootstrap-vue.org/docs/components/form-checkbox

When I use the example HTML/JS in my own application, I can get the html to render but it doesn't show the actual switch toggle, like so:

https://jsfiddle.net/Lz5tcpqb/2/

<template>
  <div>
    <b-form-checkbox v-model="checked" name="check-button" switch>
      Switch Checkbox <b>(Checked: {{ checked }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    }
  }
</script>

Is there something I'm missing here?

Yondonjamts Ganzorig · Accepted Answer · 2020-12-04 20:12:42Z

4

It's kind of working, you might need to import css or use latest stable version of bootstrap-vue and Vue.js

new Vue({
  el: '#app',
  data() {
    return {
      checked: false,
    };
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-checkbox v-model="checked" name="check-button" switch>
    Switch Checkbox <b>(Checked: {{ checked }})</b>
  </b-form-checkbox>
</div>

answered Dec 4, 2020 at 20:12

Yondonjamts Ganzorig

3233 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nubtacular Over a year ago

Excellent, thank you for sharing and I see the issue. Just a standard checkbox if you don't have bootstrap.min.css. Adding that fixed it! Thank you. Demonstrated here: jsfiddle.net/as1b0ec9 if you remove that bootstrap.min.css, it won't have the switch style.

kurdemol94 Over a year ago

Confirmed, after adding bootstrap.min.css it worked, the rest I had imported from npm

Collectives™ on Stack Overflow

Bootstrap-Vue Switch Style Checkbox: doesn't show custom control toggle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related