Make CheckBox rounded in Bootstrap

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi All

How to make checkBox rounded in html or css 

thanks And regards

siddu

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months 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