"Radio-images"
Bootstrap 4.0.0 Snippet by UpmostScarab

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <ul> <li class="btn btn-light active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> <img src="https://www.gravatar.com/avatar/75550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me"> </li> <li class="btn btn-light"> <input type="radio" name="options" id="option2" autocomplete="off"> <img src="https://www.gravatar.com/avatar/75550aaf5b7db5ega2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me"> </li> <li class="btn btn-light"> <input type="radio" name="options" id="option3" autocomplete="off"> <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me"> </li> <li class="btn btn-light"> <input type="radio" name="options" id="option4" autocomplete="off"> <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me"> </li> <li class="btn btn-light"> <input type="radio" name="options" id="option5" autocomplete="off"> <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me"> </li> <li class="btn btn-light"> <input type="radio" name="options" id="option6" autocomplete="off"> <img src="https://www.gravatar.com/avatar/735550aaf5b7db5eba2283ac3171b05ea?s=256&d=identicon&r=PG&f=1" alt="" width="24" height="24" class="-avatar js-avatar-me"> </li> </ul> </div>
img { height: 200px; width: 200px; margin: 10px; } brn-group { overflow-y: scroll; } [type='radio'] { display: none; }

Related: See More


Questions / Comments: