Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Custom circle radio buttons </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> body{margin:40px 0px;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 13px 13px; font-size: 18px; line-height: 1.33; border-radius: 25px; } </style> <div class="container"> <form class="form-horizontal col-xs-10 col-xs-offset-1" method="post" action=""> <div class="form-group"> <h4>Select One</h4> <div data-toggle="buttons"> <label class="btn btn-default btn-circle btn-lg active"> <input type="radio" name="q1" value="0"><i class="glyphicon glyphicon-home" checked></i> </label> <label class="btn btn-default btn-circle btn-lg"> <input type="radio" name="q1" value="1"><i class="glyphicon glyphicon-ok"></i> </label> <label class="btn btn-default btn-circle btn-lg"> <input type="radio" name="q1" value="2"><i class="glyphicon glyphicon-remove"></i> </label> </div> </div> <div class="form-group"> <h4>Select One</h4> <div data-toggle="buttons"> <label class="btn btn-primary btn-circle"> <input type="radio" name="q2" value="0"><i class="glyphicon glyphicon-home"></i> </label> <label class="btn btn-success btn-circle"> <input type="radio" name="q2" value="1"><i class="glyphicon glyphicon-ok" checked></i> </label> <label class="btn btn-danger btn-circle active"> <input type="radio" name="q2" value="2"><i class="glyphicon glyphicon-remove"></i> </label> </div> </div> <div class="form-group"> <h4>Select One</h4> <div data-toggle="buttons"> <label class="btn btn-primary btn-circle btn-lg"> <input type="radio" name="q2" value="0"><i class="glyphicon glyphicon-home"></i> </label> <label class="btn btn-success btn-circle btn-lg active"> <input type="radio" name="q2" value="1"><i class="glyphicon glyphicon-ok" checked></i> </label> <label class="btn btn-danger btn-circle btn-lg"> <input type="radio" name="q2" value="2"><i class="glyphicon glyphicon-remove"></i> </label> </div> </div> </form> </div> </body> </html>
×
Close
Bootstrap Custom circle radio buttons - Free Time Learning
Sample Data
