how to stylize the input checkbox in twitter bootstrap?

Question

I have to make a input checkbox simple but could not find some kind of optional class at bootstrap, also searched on github some library and could not find anything simple as making foundation.

Thanks for help.

Answer 1

You can play with this to get a sense of what can be done:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css');

input[type="checkbox"] {
  display: none;
}

.custom-check {
		display: inline-block;
		width: 25px; height: 25px;
		background: white;
		border: 1px solid #CCCCCC;
		font-family: 'Glyphicons Halflings';
		font-size: 22px;
		line-height: 1;
	}

.custom-check::before {
  content: "\e013";
  color: #424242;
  display: none;
}

input[type=checkbox]:checked+.custom-check::before {
  display: block;
  color: white;
  background-color: #554236;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div>
  <label >
    <input type="checkbox">
    <span class="custom-check"></span>
    My Checkbox
  </label>
</div>

If that's not enough, this answer to a similar question also gives a good overview of the css involved in customizing the bootstrap checkbox.