2

Bootstrap material design checkbox, radio buttons and toggle buttons are not getting styled according to material design in the below code, Please help me.

<link href="css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link href="css/jquery-ui.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/material-fullpalette.min.css" rel="stylesheet" />

<link href="css/ripples.min.css" rel="stylesheet" />
<link href="css/material-design-iconic-font.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<div class="form-group" style="margin-top: 0;">
  <!-- inline style is just to demo custom css to put checkbox below input above -->
  <div class="col-md-offset-2 col-md-10">
    <div class="checkbox">
      <label>
        <input type="checkbox">Checkbox
      </label>
      <label>
        <input type="checkbox" disabled="">Disabled Checkbox
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-md-offset-2 col-md-10">
    <div class="togglebutton">
      <label>
        <input type="checkbox" checked="">Toggle button
      </label>
    </div>
  </div>
</div>
<div class="col-md-10">
  <div class="radio radio-primary">
    <label>
      <input type="radio" name="optionsRadios" id="Radio1" value="option1" checked="">Option one is this
    </label>
  </div>
  <div class="radio radio-primary">
    <label>
      <input type="radio" name="optionsRadios" id="Radio2" value="option2">Option two can be something else
    </label>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/ripples.min.js"></script>
T J
  • 42,762
  • 13
  • 83
  • 138
Shashidhar
  • 191
  • 1
  • 3
  • 11

1 Answers1

2

You need to initialize the material design plugin like:

$.material.init();

This will inject the elements which are necessary for styling the checkbox, radio etc. Include it after all the library files are loaded.

T J
  • 42,762
  • 13
  • 83
  • 138