Place text inline bootstrap fields

Asked

Viewed 1,974 times

1

<label class="control-label col-md-3 col-sm-3 col-xs-3" for="last-name">*</label>
  <div class="form-group">
    <div class="col-md-3 col-sm-3 col-xs-6">

    <label>
      <input type="number" id="" name="protocolos[]"  class="form-control col-md-3 col-xs-3" style="width:65px;display:inline"/>            </label>

    <label>
      <input type="hidden" id="" name="siglas[]" value="'.$sigla.'" style="width:65px;display:inline"/>
    <label>

  </div>
</div>

html bootstrap

  • Can you explain the need a little better? I couldn’t understand...

  • There is no point in transforming the element into inline and setar width, because width does not work on inline elements. Maybe what you want is inline-block.

  • Isadora your problem is VERY likely with importing Bootstrap into the page! I tested here and got the * and the input on the same line without problems. If you want I put the answer with the code

  • Hi guys! Thanks for the answers! @dvd I’m going to try inline-block. Width is just to decrease the field size.

  • @Diegosantos just want to put text type fields on the same line, I wanted to know if bootstrap has any special class p this.

  • @hugocsl if you don’t mind sharing, I’d be grateful.

Show 1 more comment

1 answer

2


Isadora according to the Bootstrap Documentation the way to make the "inline" form is this https://getbootstrap.com/docs/3.3/css/#Forms-inline

Your code had some basic bugs like the tag <label> without being closed and other html organization structure problems.

I made this template by mixing your code and the Bootstrap documentation, I think it can suit you the way you want it.

OBS: In the first example the * is within the same Col- of <input> in the second example the * is separated into a Col- and the <input> in another Col- (but everything is like inline)

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<form class="form-inline">
    <div class="form-group">
        <div class="col-md-3 col-sm-3 col-xs-3">
                <label for="" class="control-label">*</label>
            <input type="number" id="" name="protocolos[]" class="form-control" style="width:65px;display:inline"/>
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-md-1 col-sm-1 col-xs-1">*</label>
        <div class="col-md-3 col-sm-3 col-xs-3">
            <input type="text" id="" name="siglas[]" class="form-control" value="'.$sigla.'" style="width:65px;display:inline"/>
        </div>
    </div>
</form>

Any doubt is just talk

Browser other questions tagged html bootstrap

You are not signed in. Login or sign up in order to post.