<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-md-5">
<h3>Açaí</h3>
<div class="row">
<h4>Frutas</h4>
<div class="funkyradio">
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox1" />
<label for="checkbox1">1 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox2" />
<label for="checkbox2">2 Option primary</label>
</div>
</div>
</div>
</br>
</br>
<div class="row">
<h4>Condimentos</h4>
<div class="funkyradio">
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox3" />
<label for="checkbox3">1 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox4" />
<label for="checkbox4">2 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox5" />
<label for="checkbox5">3 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox6" />
<label for="checkbox6">4 Option primary</label>
</div>
</div>
</div>
</br>
</br>
<div class="row">
<h4>Coberturas</h4>
<div class="funkyradio">
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox7" />
<label for="checkbox7">1 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox8" />
<label for="checkbox8">2 Option primary</label>
</div>
</div>
</div>
</br>
</br>
</div>
<div class="col-md-2">
</div>
<div class="col-md-5">
<h3>Porção</h3>
<div class="row">
<h4>Ingredientes</h4>
<div class="funkyradio">
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox9" checked/>
<label for="checkbox9">1 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox10" checked/>
<label for="checkbox10">2 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox11" checked/>
<label for="checkbox11">3 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox12" checked/>
<label for="checkbox12">4 Option primary</label>
</div>
</div>
</div>
</br>
</br>
<div class="row">
<h4>Extras</h4>
<div class="funkyradio">
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox13" />
<label for="checkbox13">1 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox14" />
<label for="checkbox14">2 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox15" />
<label for="checkbox15">3 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox16" />
<label for="checkbox16">4 Option primary</label>
</div>
</div>
</div>
</br>
</br>
<div class="row">
<h4>Molhos</h4>
<div class="funkyradio">
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox17" />
<label for="checkbox17">1 Option primary</label>
</div>
<div class="col-md-6">
<input type="checkbox" name="checkbox" id="checkbox18" />
<label for="checkbox18">2 Option primary</label>
</div>
</div>
</div>
</br>
</br>
</div>
</div>
@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css')
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
/* SCSS STYLES */
/*
.funkyradio {
div {
clear: both;
overflow: hidden;
}
label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
&:empty {
display: none;
~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
user-select: none;
&:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
}
}
&:hover:not(:checked) ~ label {
color: #888;
&:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
}
&:checked ~ label {
color: #777;
&:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
}
&:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
}
&-default {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #333;
background-color: #ccc;
}
}
}
&-primary {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
}
}
&-success {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
}
}
&-danger {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
}
}
&-warning {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
}
}
&-info {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
}
}
}
*/