CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
David Hope
David Hope

Reputation: 1536

CSS: Place Bootstrap input's label above it?

I am using Bootstrap in my design and I need to place the input's Label above it but the labels are currently sitting next to the inputs which causes the inputs not to be 100% width.

This is an example of the issue:

https://jsfiddle.net/od5Lc5cz/1/

and my current code is:

  <div class="form-group">
    <div class="input-group">

<label for="gst">Commission</label>
    <span class="input-group-addon">%</span>
    <input id="coms" type="text" class="form-control" name="coms" placeholder="Commission" value="">
  </div>
  </div>

Could someone please advice on this issue?

Upvotes: 0

Views: 1844

Answers (3)

Rasad Hasanzada
Rasad Hasanzada

Reputation: 106

you can use so:

<div class="form-group">
   <label for="basic-url">Your vanity URL</label>
   <div class="input-group">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
   </div>
</div>

Upvotes: 1

Robert
Robert

Reputation: 6967

Your code organization is incorrect, as .input-group is designed to collect the items in a single line. The solution is to move your <label> outside that class:

<div class="form-group">
    <label for="gst">Commission</label>
    <div class="input-group">
        <span class="input-group-addon">%</span>
        <input id="coms" type="text" class="form-control" name="coms" placeholder="Commission" value="">
    </div>
</div>

Upvotes: 2

Ricktron3000
Ricktron3000

Reputation: 94

Looks like you had your <div class="input-group"> on the wrong line.

https://jsfiddle.net/od5Lc5cz/2/

<div class="form-group">
  <label for="gst">Commission</label>
  <div class="input-group">
    <span class="input-group-addon">%</span>
    <input id="coms" type="text" class="form-control" name="coms" placeholder="Commission" value="<?php echo $coms; ?>">
  </div>
</div>

Upvotes: 1

Related Questions