CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
user3485417
user3485417

Reputation: 623

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 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

Upvotes: 8

Views: 64676

Answers (5)

Md. Masudur Rahman
Md. Masudur Rahman

Reputation: 1078

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
}

Upvotes: 17

Aijaj Hussain Ansari
Aijaj Hussain Ansari

Reputation: 375

For Bootstrap 4+ use

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

Upvotes: 3

Elyas &#39;Eloy&#39; Hadizadeh Tasbiti
Elyas &#39;Eloy&#39; Hadizadeh Tasbiti

Reputation: 3665

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">

Upvotes: 3

user3485417
user3485417

Reputation: 623

     <!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='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' 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>

Upvotes: 0

Kenzo-kun
Kenzo-kun

Reputation: 156

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. https://jsfiddle.net/127c14bu/

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.

Upvotes: 0

Related Questions