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

Asked

Viewed 6,582 times

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 is as follows: inserir a descrição da imagem aqui

But I’d like it to stay the way it is: inserir a descrição da imagem aqui

I’ve tried to do it my way:

<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="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

  • puts a specific id on the one you want to stay online, then changes its flotation requirements

1 answer

1


Utilize Gridsystem to position its elements, the total of 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>
<script src="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

Browser other questions tagged html css

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