Twitter Bootstrap Question posted in

Bootstrap Inline form with 2 inputs with less padding between them – Twitter bootstrap

I have a form made with twitter-bootstrap that has 2 input fields inline nested in 2 columns(see the code below)

What’s the best way to remove padding between 2 inputs to make it look like the following image:

enter image description here

–question

Should I add a wrapper and id’s to each of the inputs and then add custom styling like padding-right: 0px; padding-left: 0px;

or there’s a better way to accomplish this?

form html

<form action="#" method="post" id="" class="sky-form ">
  <fieldset class="no-padding">
    <div class="row">
      <div class="col-lg-11 col-lg-offset-0">
        <div class="form-group">
          <label class="input">Left text field</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>

      <div class="col-lg-1 col-lg-offset-0">
        <div class="form-group">
          <label class="input pull-right ">RightF #</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>
    </div>
  </fieldset>
</form>

output1 col-lg-11 col-lg-1

enter image description here

output2 col-lg-10 col-lg-2

enter image description here

Tags:

2

Answers


  1. 0

    I see that you are using Bootstrap. The framework is written in a way that every column adds padding. Your output is right. All you have to do is remove padding from the columns. Showing below:

    <form action="#" method="post" id="" class="sky-form ">
  <fieldset class="no-padding">
    <div class="row">
      <div class="col-lg-11 col-lg-offset-0" style="padding-right:0">
        <div class="form-group">
          <label class="input">Left text field</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>

      <div class="col-lg-1 col-lg-offset-0" style="padding-left:0">
        <div class="form-group">
          <label class="input pull-right ">RightF #</label>
          <input type="text" class="form-control input-lg">
        </div>
      </div>
    </div>
  </fieldset>
</form>
    Login or Signup to reply.
  2. 0

    The reason of spaces between two inline elements is because of the font-size. Read this article to read how can you remove this.

    One way to remove this space is to give negative margins.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search