Search code examples
javascriptcsstwitter-bootstrapmaterial-designbootstrap-material-design

How to find out where bootstrap-material is created

I'm trying to use Bootstrap-Material in my website.

I'm having a problem getting the checkbox to work. When I copy the code from the Bootstrap-Material site to my project, most of the features work, but no Box appears beside the label "Checkbox". Instead of looking like

material checkobx

it looks like

checkbox material

I've been going through the source code on the Bootstrap-Material and I've imported all the css and js they have.

What's confusing is, I've inspected the elements on the Checkbox of the Bootstrap-Material page and I can't figure out what css or js file is actually creating the checkbox. It doesn't seem to be coming from an image file, so where is it coming from? Perhaps if I can figure out where it is created, I can figure out why my project is not rendering it.

Any ideas on where this box comes from?

Solution

  • Two things to check:

    1: Are you calling $.material.init() to active Material Design.
    2: Are your CSS files stacked with Material Design before the Bootstrap v3.0+ file.
    3: You're using jQuery 1.9.1+.

    $.material.init()
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <h1 class="header">Checkbox</h1>

  <!-- Simple checkbox with label -->
  <div class="sample1">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Notifications</label>
    </div>

  </div>


</div>