1

I am trying to create a form with bootstrap. Here is my source code: 

<div class="container">
<form action="" method="post" id="payment-form" novalidate autocomplete="on">
<span class="payment-errors"></span>

  <div class="form-group">
    <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
    <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required class="col-md-2">
  </div>

 <div class="form-group">
    <label for="cc-exp" class="control-label">Card expiry formatting</label>
    <input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">
  </div>

  <div class="form-group">
    <label for="cc-cvc" class="control-label">Card CVC formatting</label>
    <input id="cc-cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required class="col-md-2">
  </div>

  <button type="submit" class="btn btn-lg btn-primary">Submit</button>

  <h2 class="validation"></h2>
</form>
</div>

I want to do size="30" for fields. But the fields are still too large and this size doesn't affect fields. What changes should I do?

user4271704
  • 723
  • 1
  • 12
  • 37
  • Can you please include your source code in your actual question? – Scott Nov 24 '15 at 20:59
  • try laying out the form using their grid system. For example, you can wrap the field in a div, and set the class to `col-md-3`. Simply substitute the 3 for whatever width you need. – JD Davis Nov 24 '15 at 20:59
  • Where exactly to use that class? Inside input tag? Or inside div tag which is surrounding the input tag? – user4271704 Nov 24 '15 at 21:08
  • Please advice how to make red the error message for span form-errors in source above? – user4271704 Dec 03 '15 at 18:40

1 Answers1

2

Please use this class col-md-3 or col-md-2. Please use width="30px", hope this will help you. EDITED: if div is your main tag then put the code like

<div class="form-group">
        <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
        <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" class="col-md-3">
      </div>

or you can use width like


<div class="form-group">
        <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
        <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" style="width:30px !important">
      </div>

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap

please let me know if you have any confusion.\ Thank you

Community
  • 1
  • 1
zafar hayat
  • 98
  • 1
  • 8