Bootstrap text input height

Question

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

Answer 1

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
}

Answer 2

For Bootstrap 4+ use

<input type="text" class="form-control form-control-lg mb-2">