HTML.form.guide

How to create checkbox in Bootstrap style ?

checkbox bootstrap css

Here is the code to create a simple checkbox with bootstrap style:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="yes" id="newsletter_signup">
  <label class="form-check-label" for="newsletter_signup">
    Signup for newsletter
  </label>
</div>

Here is the working demo of a checkbox using Bootstrap style:

‘Inline’ checkboxes

Suppose you want multiple checkboxes in a single line. Just add form-check-inline class.

Here is the sample code:

<form >
    <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="chk_red" >
    <label class="form-check-label" for="chk_red">Red</label>
    </div>
    <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="chk_green" >
    <label class="form-check-label" for="chk_green">Green</label>
    </div>
    <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="chk_blue" >
    <label class="form-check-label" for="chk_blue">Blue</label>
    </div>
</form>

See Also

Categories