<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 display-inline"> <input type="text" id="text-color" style="width:80%;display:inline-block" class="form-control" /> <input type="submit" id="btn" class="btn btn-danger" /> <ul id="ppp" class="paganation"> </ul> </div>

ul{margin-left:0;padding-left:0px;} li{font-weight:bold;font-size:40px;text-transform: capitalize;display:inline-block;border:1px solid #ccc;margin:5px;}

$(document).ready(function(){ $('#btn').click(function(){ var letters = /[^a-zA-Z0-9\-\/]/; //var x = $('#text-color').val().split(' '); var x = $('#text-color').val(); var text = ""; for(i=0; i < x.length; i++) { var randomColor = "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}); //text += '<li style="color:#'+(parseInt(Math.random()*1000000)+100000)+';">'+x[i]+'</li>'; text += '<li style="color:#'+randomColor+';border:'+parseInt(Math.random()*16)+'px solid #'+randomColor+';margin:'+parseInt(Math.random()*50)+'px;"> ' + x[i] + ' </li>'; document.getElementById("ppp").innerHTML=text; } }); });