Make CheckBox rounded in Bootstrap

Last Reply one year ago By dharmendr

Posted one year ago

Hi All

How to make checkBox rounded in html or css 

thanks And regards

siddu

Posted one year ago

Hi sanvi,

Use bootstrap to style your checkbox.

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://flatlogic.github.io/awesome-bootstrap-checkbox/demo/build.css" />
<div class="row">
    <div class="col-md-4">
        <div class="checkbox  checkbox-circle">
            <input id="chkDefault" type="checkbox" checked />
            <label for="chkDefault">
                Default
            </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-circle">
            <input id="chkPrimary" type="checkbox" checked />
            <label for="chkPrimary">
                Primary
            </label>
        </div>
        <div class="checkbox checkbox-info checkbox-circle">
            <input id="chkInfo" type="checkbox" checked />
            <label for="chkInfo">
                Info
            </label>
        </div>
        <div class="checkbox checkbox-success checkbox-circle">
            <input id="chkSuccess" type="checkbox" checked />
            <label for="chkSuccess">
                Success
            </label>
        </div>
        <div class="checkbox checkbox-warning checkbox-circle">
            <input id="chkWarning" type="checkbox" checked />
            <label for="chkWarning">
                Warning
            </label>
        </div>
    </div>
</div>

Demo