Bootstrap text input height
Sebastian Wright 
I am trying to increase the text input height inside a form on a site I am programming. I try to override the default bootstrap css of 20px height but nothing seems to be changing. Here is my code--
css
.inputfield { position:relative; top:30px; font-size: 60px!important; font-family:'Lato', sans-serif !important; font-weight: 400; color:white ; width:400px; line-height: 100px!important; opacity:0.2; }and
the form HTML
<form action="" method="post"> <div> <input type="text" name="name" placeholder="Username"><br><br> </div> <input type="password" name="password" placeholder="Password"><br><br> <br> <input type="submit" value="Login" /><br> </form>please help
15 Answers
You can use css height attribute both as inline css :
<input/>or class
<input/>and the css
.inputfield { height: 50px
}For Bootstrap 4+ use
<input type="text">Although It is possible to attach a CSS file to apply your request, Bootstrap has got some predefined classes that can be helpful for your aim.
In bootstrap 4:
You can manipulate the size of the form control with .form-control-sm or .form-control-lg classes.
<input type="text">
<input type="text">
<input type="text">Of course, you can change the default settings of classes by overriding them:
.form-control-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem;
}In bootstrap 3:
You can set the heights of input elements using classes like .input-lg and .input-sm.
<input type="text">
<input type="text">
<input type="text">Based from the code you gave, you are not using bootstrap so I will just assume that this is what you are trying to achieve.
If you want to override the height, you can add another css class on your input text that contains the desired height. See the .overrideheight and change the value of height.
I hope it helps.
1 <!DOCTYPE html> <html> <head> <title>Login</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="/demo/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link href=' rel='stylesheet' type='text/css'> <style > *{ margin:0 !important; padding:0 ! important; } body { width: 100%; min-height: 800px; background-size: 100%; background-repeat: no-repeat; position:absolute; background-image: url(demo_BG_1024.png); background-color: rgb(0,0,0); } ul{ padding-top: 0px; } .form-signin { width:500px !important; height:300px ! important; } .form-signin { max-width: 500px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff; border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin input[type="text"], .form-signin input[type="password"] { font-size: 16px; height: auto; margin-bottom: 15px; padding: 7px 9px; } .left { float: left; display: block; width: 25%; padding-left: 0px; text-align: left; } .right { float: right; display: block; width: 75%; text-align: right; padding-right: 0px; } .header { font-family: 'Lato', sans-serif; font-weight: 700; color: white; font-size: 64px; padding-top: 60px; } .header2 { padding-top: 0px; font-family: 'Lato', sans-serif; font-weight: 300; color: white; font-size: 46px; } .header3 { padding-top: 0px; font-family: 'Lato', sans-serif; font-weight: 300; color: white; font-size: 30px; } .header4 { padding-top: 0px; font-family: 'Lato', sans-serif; font-weight: 300; color: white; font-size: 18px; } nav{ position: fixed; right: 0; left: 0; z-index: 1030; margin-bottom: 0; width: 100%; height: 78px; padding:0 px; background-color: rgb(0,0,0); } ul li { list-style-type: none; margin: 0px; display: inline-block; } #logo_image { padding: 10px 30px!important; } .menu_buttons { font-family:'Lato', sans-serif; font-weight: 400; font-size: 18px; color:white ; display: inline-block; padding: 10px 30px !important; } .demobtn { height:1.3em; width:2.5em; background-color:#00b6ee; display:inline-block; cursor:pointer; color:#ffffff; font-family:'Lato', sans-serif; font-weight: 300; font-size:30px; padding:10px 100px; text-decoration:none; text-shadow:0px 0px 0px #2f6627; } .demobtn:hover { `enter code here`background-color:#00b6ee; text-decoration:none; } .demobtn:active { position:relative; text-decoration:none; top:1px; } .inputfield { position:relative; top:30px; font-size: 60px!important; font-family:'Lato', sans-serif !important; font-weight: 400; color:white ; width:400px; line-height: 100px!important; opacity:0.2; } .overrideheight { height: 90px; } .sign-in { padding-top: 100px; margin-top:100px; } .myForm { position:relative; top:230px; margin-left: auto; margin-right: auto; } </style> </head> <body> <div>
<nav> <ul ><li><img alt="logo" src="img/demo_logo.png"></li></ul> <ul > <li><a href="#">Login</a></li> </ul>
</nav>
</div>
<div>
<div>
<div> <div></div> <div><h2>Login to demo</h2></div> <div></div>
</div>
<br>
</div>
</div> <form action="" method="post"> <div> <input type="text" name="name" placeholder="Username"><br><br> </div> <input type="password" name="password" placeholder="Password"><br><br> <br> <input type="submit" value="Login" /><br> </form>
<div> <ul> <li><a href="#" >Home</a></li> <li><a href="#" >About</a></li> <li><a href="#" >Support</a></li> </ul> <ul> <li><a href="#" >Powered by Demo</a></li> </ul>
</div>
<script>
$(document).ready(function(){ $("#submit").attr("disabled",true); var username = ''; $("#username").on('change keyup paste mouseup', function() { if ($(this).val() != username) { username = $(this).val(); } }); var password = ''; $("#username").on('change keyup paste mouseup', function() { if ($(this).val() != password) { password = $(this).val(); if(username!=""&&password!="") { $("#submit").attr("disabled",false); } } });
});
</script>
</body>
</html>
