span is not inline with input using bootstrap 3

2
votes

I am using Bootstrap 3 with form-horizontal in form tag. I am making use of form-group as shown in below sample HTML. span is not inline with input control as it is expected by using form-horizontal.

<form name="productForm" class="form-horizontal">
<div class="col-lg-6">
    <div class="form-group">

            <span class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align:right;">Number</span>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <input type="text" class="form-control  control-look-input" />
            <div class="control-look"></div>
        </div>
    </div>
    <div class="form-group">

            <span class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align:right;">Name</span>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <input type="text" class="form-control control-look-input" />
            <div class="control-look"></div>
        </div>
    </div>
</div>
<!-- More tags -->

For better understanding this is the fiddle for it

Solution for reference: Refer control-label class in span to get it working like fiddle working

2
htmlcsstwitter-bootstrap-3
Can you expand on the issue with the CSS that you are expecting to work for this HTML? - Michael G
I am using Bootstrap 3, other than that no other CSS involved. In getbootstrap.com/css/#forms-horizontal I have seen that label and input controls are inline when col-md-4 is not used for label. Here in my case I have to use col-md-4 on top of span. - Venu

2 Answers

2
votes

All what you need to do just change the span to label and have it above the div that holds inputs like so in the code below:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<form name="productForm" class="form-horizontal">
  <div class="form-group">
    <label for="number" class="col-sm-2 control-label">Number</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="number" placeholder="Enter your Number...">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="Enter your Name...">
    </div>
  </div>
</form>

But if you want it as a span here is the code which I don't recommend it because you can't apply to <span> what you can apply to <label> as if you click on the label it will select his input.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<form name="productForm" class="form-horizontal">
  <div class="form-group">
    <span for="number" class="col-sm-2 control-label">Number</span>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="number" placeholder="Enter your Number...">
    </div>
  </div>
  <div class="form-group">
    <span for="name" class="col-sm-2 control-label">Name</span>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="Enter your Name...">
    </div>
  </div>
</form>

If you have any question let me know or if I miss something you want.

0
votes

Since your information is a little limited, its hard to tell what the rest of your styles are. Here is a quick example of not having the correct styles implemented can do to your form, since your <span> and <input> are actually in two different divs, that may not be set to display inline.

.form-horizontal div {
    display: inline-block;
}

Here is what I mean by separate DIVs, and possibly since not using "labels" your two separate DIVs are not inline: enter image description here

It seems that Bootstrap is using actual labels, so you may want to venture in that direction? (example seen below) enter image description here