Bootstrap Text Input Height
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...
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 class="text-center" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="inputfield" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="inputfield" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
please help
5 Answers
You can use css height attribute both as inline css :
<input style="height:50px"/>
or class
<input class="inputfield"/>
and the css
.inputfield {
height: 50px
}
For Bootstrap 4+ use
<input type="text" class="form-control form-control-lg mb-2">
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" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
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 class="form-control input-sm" id="inputsm" type="text">
<input class="form-control" id="inputdefault" type="text">
<input class="form-control input-lg" id="inputlg" 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.
<!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 class="row">
<nav>
<ul class="left" ><li id="logo_image"><img alt="logo" src="img/demo_logo.png"></li></ul>
<ul class="right" >
<li><a class="menu_buttons" href="#">Login</a></li>
</ul>
</nav>
</div>
<div class="row ">
<div class="myForm">
<div class="row sign-in ">
<div class="col-xs-6 col-md-4 col-lg-4"></div>
<div class="col-xs-6 col-md-4 col-lg-4 text-center"><h2 class="header2">Login to demo</h2></div>
<div class="col-xs-6 col-md-4 col-lg-4"></div>
</div>
<br>
</div>
</div>
<form class="text-center form-group" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="form-control overrideheight" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="form-control overrideheight" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
<div class="navbar-fixed-bottom">
<ul class="left">
<li><a href="#" class="menu_buttons" >Home</a></li>
<li><a href="#" class="menu_buttons" >About</a></li>
<li><a href="#" class="menu_buttons" >Support</a></li>
</ul>
<ul class="right">
<li><a href="#" class="menu_buttons" >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>
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
