CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Alberto José
Alberto José

Reputation: 65

bootstrap: how align a input with a button

I'm using Bootstrap to make a form in a modal, but I have a problem with the labels. The labels are on top of the input instead of inside, and are messing up the vertical alignment with the button on the right

enter image description here

im using bootstrap 3.3.7 and this is my code

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <div class="input-group">
      <label for="nombre_comercio_form">Id comercio:</label>
      <input type="text" class="form-control" id="nombre_comercio_form" ng-model="nombre_comercio">
      <span class="input-group-btn">
        <button  type="button" class="btn btn-primary" onclick="$('#buscadora').focus()"  data- toggle="modal" data-target="#ModalBuscarComercio">Buscar Comercio
         </button>
       </span>
    </div>
  </div>
  <div class="form-group">
    <label for="nit_form">Codigo del plan:</label>
    <input type="text" class="form-control" id="nit_form" ng-model="nit_comercio">
  </div>
  <div class="form-group">
    <label for="nombre_payu_form">Descripcíon:</label>
    <input type="text" class="form-control" id="nombre_payu_form" ng-mode="nombre_payu">
  </div>
  <div class="form-group">
    <label for="correo_payu_form">Duración:</label>
    <input type="text" class="form-control" id="correo_payu_form" ng-model="correo_payu">
  </div>
  <div class="form-group">
    <label for="plan_code_form">Valor:</label>
    <input type="text" class="form-control" id="plan_code_form" ng-model="plan_code">
  </div>
</form>

Upvotes: 1

Views: 820

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Adding this for the .input-group-btn gives this:

.input-group-btn {display: block;}

Preview

preview

Snippet

.modal .input-group-btn {display: block;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal show">
  <div class="modal-body">
    <form>
      <div class="form-group">
        <div class="input-group">
          <label for="nombre_comercio_form">Id comercio:</label>
          <input type="text" class="form-control" id="nombre_comercio_form" ng-model="nombre_comercio">
          <span class="input-group-btn">
        <button  type="button" class="btn btn-primary" onclick="$('#buscadora').focus()"  data- toggle="modal" data-target="#ModalBuscarComercio">Buscar Comercio
         </button>
       </span>
        </div>
      </div>
      <div class="form-group">
        <label for="nit_form">Codigo del plan:</label>
        <input type="text" class="form-control" id="nit_form" ng-model="nit_comercio">
      </div>
      <div class="form-group">
        <label for="nombre_payu_form">Descripcíon:</label>
        <input type="text" class="form-control" id="nombre_payu_form" ng-mode="nombre_payu">
      </div>
      <div class="form-group">
        <label for="correo_payu_form">Duración:</label>
        <input type="text" class="form-control" id="correo_payu_form" ng-model="correo_payu">
      </div>
      <div class="form-group">
        <label for="plan_code_form">Valor:</label>
        <input type="text" class="form-control" id="plan_code_form" ng-model="plan_code">
      </div>
    </form>
  </div>
</div>

Alternative Solution

Alternatively, if you want the labels to be inside the inputs, use the placeholder attribute.

Upvotes: 2

Related Questions