"Quiz Radio Buttons"
Bootstrap 3.3.0 Snippet by fzs1994

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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="row">
<div class="col-md-12">
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="options" id="option1" autocomplete="off"> Option 1
</label>
<label class="btn">
<input type="radio" name="options" id="option2" autocomplete="off"> Option 2
</label>
<label class="btn">
<input type="radio" name="options" id="option3" autocomplete="off"> Option 3
</label>
<label class="btn">
<input type="radio" name="options" id="option4" autocomplete="off"> Option 4
</label>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.btn-group {
width: 100%;
border-radius: 0;
}
.btn-group .btn {
padding: 20px;
font-size: 18px;
text-align: left;
color: #666;
}
.btn:active, .btn.active {
box-shadow: none;
}
.btn-group .btn.active {
box-shadow: none;
background-color: #F7F8FB;
color: #FF590B;
}
.btn-group .btn:first-child:before {
content: 'A';
border: 2px solid #666;
border-radius: 50px;
padding: 10px 14px;
margin-right: 15px;
}
.btn-group .btn:nth-child(2):before {
content: 'B';
border: 2px solid #666;
border-radius: 50px;
padding: 10px 14px;
margin-right: 15px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3
Animated Radio tab
Modal Quiz with Radio button

Questions / Comments: