How to put input and label side by side with bootstrap?

Question

How to put input and label side by side with bootstrap?

Navigation

#1 by (1 votes)

1

I have the following HTML structure:

<div class="col-xs-4">
    <div class="form-group">
        <label for="vencimentoBolsa">Vencimento:</label>
        <input type="text" class="form-control" name="dtVencimento" placeholder="Vencimento" required>
    </div>
    <div class="form-group">
        <label for="volumeBolsa">Volume:</label>
        <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
    </div>
    <div class="form-group">
        <label for="unidadeVolume">Unidade Volume:</label>
        <select class="selectpicker" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
</div>

The previous structure looks like this:

ButIwishitwasthewayitwas:

Ihavetriedtodothefollowing:

<divclass="col-xs-4">
    <div class="form-group">
        <label for="vencimentoBolsa">Vencimento:</label>
        <input type="text" class="form-control" name="dtVencimento" placeholder="Vencimento" required>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label for="volumeBolsa">Volume:</label>
            <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label for="unidadeVolume">Unidade Volume:</label>
            <select class="selectpicker" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
                <option selected disabled>Escolha uma opção</option>
                <option>Mililitro</option>
                <option>Litro</option>
            </select>
        </div>
    </div>
</div>

But there is a margin on the left and right of the inputs.

html css

asked by anonymous 24.09.2017 / 17:06

1 answer

Doubts in javascript collisions Read strings in java within a while or do-while loop

score 1 · Accepted Answer

Use GridSystem to position your elements, the total columns are 12, example :

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="unidadeVolume">Grupo:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
  </div>
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="volumeBolsa">Vencimento:</label>
      <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
    </div>
  </div>
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="unidadeVolume">Status:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
  </div>
</div>
</div>
<!--next-->
<div class="row">
  <div class="col-md-4 col-xs-4">
    <div class="form-group">
      <label for="unidadeVolume">Grupo:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
  </div>
  <div class="col-md-2 col-xs-2">
    <div class="form-group">
      <label for="volumeBolsa">Volume:</label>
      <input type="text" class="form-control" name="volumeBolsa" placeholder="Volume" required>
    </div>
  </div>
  <div class="col-md-2 col-xs-2">
    <div class="form-group">
      <label for="unidadeVolume">Un. Volume:</label>
      <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
    </div>
    <div class="col-md-6 col-xs-6">
    </div>
  </div>
</div>
  <!--next-->
  <div class="row">
    <div class="col-md-4 col-xs-4">
      <div class="form-group">
        <label for="unidadeVolume">Grupo:</label>
        <select class="form-control" data-size="5" data-live-search="true" data-width="100%" name="unidadeVolume" required>
            <option selected disabled>Escolha uma opção</option>
            <option>Mililitro</option>
            <option>Litro</option>
        </select>
      </div>
    </div>
    <div class="col-md-2 col-xs-2">
     
    </div>
    <div class="col-md-2 col-xs-2">
     
    </div>
    <div class="col-md-6 col-xs-6">
     
    </div>
  </div>

Reference Grid system

p>