<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="container"> <div class="row"> <ul> <li><a href="#" id="decrease">A-</a></li> <li><a href="#" id="reset">A</a></li> <li><a href="#" id="increase">A+</a></li> </ul> </div> </div>

<!-- body font-size change --> <script type="text/javascript"> $(document).ready(function(){ $('#increase').click(function(){ fontsize('increase'); }); $('#decrease').click(function(){ fontsize('decrease'); }); $('#reset').click(function(){ fontsize('reset'); }); function fontsize(flag) { var divcontent= $('#divcontent'); var currentsize= parseInt(divcontent.css('font-size')); if (flag == 'increase') currentsize += 1; else if(flag == 'decrease') currentsize -= 1; else currentsize = 16; divcontent.css('font-size', currentsize); } }); </script> <!-- body font-size change -->