<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-4"> <div class="col-md-6"> <h4>Radio Buttons</h4> <div class="funkyradio"> <div class=""> <input class="btn btn-outline-success" type="radio" name="radio" id="radio1" checked/> <label class="fa fa-checked" for="radio1">First</label> </div> <div class="funkyradio-primary"> <input type="radio" name="radio" id="radio2" checked/> <label for="radio2">Second Option primary</label> </div> <div class="funkyradio-success"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">Third Option success</label> </div> <div class="funkyradio-danger"> <input type="radio" name="radio" id="radio4" /> <label for="radio4">Fourth Option danger</label> </div> <div class="funkyradio-warning"> <input type="radio" name="radio" id="radio5" /> <label for="radio5">Fifth Option warning</label> </div> <div class="funkyradio-info"> <input type="radio" name="radio" id="radio6" /> <label for="radio6">Sixth Option info</label> </div> </div> </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: 250px; 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: 1.75em; 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; }