margins and alignment in input element in bootstrap

Question

I am having trouble getting an input element and a button to align correctly. This is what it looks like:

Notice the bottom alignment of button and input

This comes from the following code:

<div class="row">
     <div class="offset1 span6">
          <input type="text" class="l_input" placeholder="enter a city"></input>
     </div>
     <div class="span3"> 
          <button class="l_button btn btn-primary" type="button">Search</button>
     </div>
</div>

I want the input height to be the same as the button, which is not the case currently. I assume this is because of margins/padding, so I tried to set them to 0 px in my css: but it has no impact.

.l_input {
 padding: 0px;
 margin: 0px;
 }

What do I need to do to get the height of the input to be aligned with the height of the search button?

thanks for pointing out the - that is a typo, I will edit the question — Siddharth Ram, May 04 '13 at 16:39
Add your own CSS after bootstrap's. Use the web inspector to test, add the style to the element. — cortex, May 04 '13 at 20:21

score 0 · Answer 1 · answered May 04 '13 at 20:18

0

You are almost right, but the margins and padding are in the other element. Try:

.l_input,
.l_button {
    padding: 0px;
    margin: 0px;
}

updated demo

answered May 04 '13 at 20:18

vals

61,425
11
89
138

margins and alignment in input element in bootstrap

1 Answers1