<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <div class="demo-container"> Some text in here <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu profile-dropdown" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li> <div class="row"> <div class="col-md-12"> <div><i class="fas fa-font"></i></div> <div class="font-sizer-label"> Text Size </div> </div> </div> </li> <li> <div class="row"> <div class="col-md-12"> <div class="btn btn-default font-size-minus-btn btn-no-border font-size-btn pull-left"> <i class="fas fa-minus"></i> </div> <input type="text" class="font-text-input" value="12px"/> <div class="btn btn-default font-size-btn font-size-plus-btn btn-no-border pull-right"> <i class="fas fa-plus"></i> </div> </div> </div> </li> <li role="separator" class="divider"></li> <li> <div class="row"> <div class="col-md-2"></div> <div class="col-md-1 btn btn-default font-btn" style="font-size:9px;padding-top:1em">small</div> <div class="col-md-1 btn btn-default font-btn active" style="font-size:14px; padding-left:0.5em;padding-top:0.25em">regular</div> <div class="col-md-1 btn btn-default font-btn" style="font-size:18px;padding-left:0.4em;padding-top:0.125em" data-bind="click: setFontSize(18), clickBubble: false">large</div> </div> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a></li> </ul> </div> </div>

.profile-dropdown { width: 260px; } .demo-container{ padding: 2em; } .font-text-input, font-text-input:focus{ border: 0; text-align:center; width: 70%; } .font-sizer-label{ padding-left: 1.5em; padding-bottom: 1em; } .font-sizer-label-text{ text-align:center; } .font-size-btn{ border-top: 0; border-bottom: 0; width: 15%; height: 2.4em; margin-top: -0.4em; margin-bottom: -0.7em; border-radius: 0; } .font-size-plus-btn{ border-left: 1 solid #e2e2e2; border-right: 0 solid; } .font-size-minus-btn{ border-right: 1 solid #e2e2e2; border-left: 0 solid; } .font-btn{ border-radius: 0; height:30px; width:58px; }

$(document).on('click', '.font-size-btn', function (e) { e.stopPropagation(); }); $(document).on('click', '.font-text-input', function (e) { e.stopPropagation(); }); function incrementFontSize(add){ var currentFontSizeValue = $('.font-text-input').val(); var currentFontSize = parseInt(currentFontSizeValue.replace("px", '')); currentFontSize += add; var newFontSize = currentFontSize + "px"; $('body').css('font-size', newFontSize); $('.font-text-input').val(newFontSize); } $('.font-size-plus-btn').click(function(){ incrementFontSize(1); }); $('.font-size-minus-btn').click(function(){ incrementFontSize(-1); }); $(document).on('click', '.font-btn', function (e) { $(".font-btn").removeClass("active"); $(this).addClass("active"); e.stopPropagation(); });