.lowercase{ text-transform: lowercase; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <style type="text/css"> .lowercase{ text-transform: lowercase; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4 col-sm-offset-4"> <div class="form-group"> <input type="text" id="lowercase" class="lowercase form-control"> </div> <div class="form-group"> <input type="text" id="uppercase" class="uppercase form-control"> </div> <div class="form-group"> <input type="text" id="capitalize" class="capitalize form-control"> </div> </div> </div> </div> </body> </html>