CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user4046073
user4046073

Reputation: 871

how to set min width for bootstrap input field

I have a simple bootstrap input field with a label. My problem now is that when I resize the browser to a smaller size, the input field becomes too narrow so that it does not display the value "1.00". Is there a way that I can define the minimum width of that input field? Or is there something wrong with the way that I'm doing it? Many thanks! 

<div class="container">

    <div class="input-group">

        <span class="text-center input-group-addon" id="sizing-addon2">Payment mount</span>
        <input class="form-control" type="text" id="payment_amount"  value="1.00">
    </div>
</div>

Upvotes: 2

Views: 12293

Answers (2)

neophyte
neophyte

Reputation: 6624

You are using bootstrap so you should use bootstrap grid system.

See the below example--

<html>
  <head>
  <meta charset="UTF-8">
        <title>Secure Login</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>
      <div class="container">

    <div class="input-group">

        <span class="text-center input-group-addon" id="sizing-addon2">Payment mount</span>
        <input class="form-control col-lg-8 col-md-10 col-sm-12 col-xs-12" type="text" id="payment_amount"  value="1.00">
    </div>
</div> 
</body>
</html>

Upvotes: 1

Abhishek Mugal
Abhishek Mugal

Reputation: 571

You can use the below code in your css.

.container input {
    min-width: 320px;   /* depends how much minimum width you require */
}

If it does not work, try accessing it by id.

#payment_amount {
    min-width: 320px;   /* depends how much minimum width you require */
}

Upvotes: 4

Related Questions