Live Demo - Custom good looking checkbox and radio button design usign bootstrap

See Free Live Demo example of checkbox and radio button with onclick custom effect. and also you can change color and effect. and you can easaly implement in your project. you can get code of how to create custom checkbox in html ? snippet. we give you example of how to make custom checkbox in css , you can simple copy bellow...

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-md-offset-3">
				<form action="#" class="form-inline">
					<div class="checkbox">
						<input type="checkbox" id="test1" name="checkbox-group" checked>
						<label for="test1">Checkbox 1</label>
					</div>
					<div class="checkbox">
						<input type="checkbox" id="test2" name="checkbox-group">
						<label for="test2">Checkbox 2</label>
					</div>
					<div class="checkbox">
						<input type="checkbox" id="test3" name="checkbox-group">
						<label for="test3">Checkbox 3</label>
					</div>
				</form>
			</div>

<div class="col-md-3">
				<form action="#" class="form-inline">
					<div class="radio">
						<input type="radio" id="radio1" name="radio-group" checked>
						<label for="radio1">Radio 1</label>
					</div>
					<div class="radio">
						<input type="radio" id="radio2" name="radio-group">
						<label for="radio2">Radio 2</label>
					</div>
					<div class="radio">
						<input type="radio" id="radio3" name="radio-group">
						<label for="radio3">Radio 3</label>
					</div>
					
				</form>
			</div> 
		</div>
	</div>
</body>
</html>

body{
    background: #f1f1f1;
    padding-top: 30px;
}
.radio, .checkbox{
    width: 100%;
    margin-bottom: 15px !important;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label,
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label{
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    color: #45c5bb;
    font-size: 18px;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    border-radius: 50%;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before,
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left:0;
    top:0px;
    width: 24px;
    height: 24px;
    border: 1px solid #45c5bb;
    background: #fff;
}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after,
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 18px;
    height: 18px;
    background:#45c5bb;
    position: absolute;
    top:3px;
    left:3px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="checkbox"]:not(:checked) + label:after,
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}