The button itself has the 'search' label, the input box and then the search button.

I have tried using various css changes such as margins to either get the button to stop sticking to the search input box and give it some breathing room when in a mobile view (small resolution) or get it to spread out lengthwise just like the main menu above.

Altercations to the search button while in the mobile view works but it also aligns it incorrectly it when in a wider/full resolution. I'm not sure what tags would be suitable to get around this.


The link above is the website on the search page.

3 Answers 3


You have to use CSS to target the button more exactly. A combination of media queries and CSS selectors should allow you to style it as needed.

You can select a HTML element with CSS using any attribute, e.g. to select the search button only, try this:

@media (max-width: 380px) {
    button[name="Search"] {
      width: 100%;

If you'd rather target the input box in order to place some air around it, try this:

#search-form input#q {
  margin-bottom: 20px;

If you CSS style affects other elements too (like you mention in your comment to another answer), you have to use a more specific selector.

  • I would suggest adding box-sizing: border-box;. Without it, using width:100% means 100% plus the input padding and border, which by default, Bootstrap uses on inputs ;)
    – Lodder
    Jun 2, 2015 at 8:46

I cant understand your question exactly but i take a little bit idea.

You want that when you the size 767 px on which small menu (offcanvas) appears, here you want that your button should be lengthwise like your menu ..

so just apply a media query and give it width 100 %. I hope that you asking for this.

  • I've tried applying 100% to it, but it alters the main button as well; I guess after thinking about it I prefer the button stay as it is and just have it so when viewed in a small resolution (when the button is underneath) it would just be about 5px margin away.
    – user5312
    May 31, 2015 at 12:56
  • just simple , give margin bottom to input or margin top to search button
    – Shehryar
    Jun 1, 2015 at 7:02

To solve this I had to apply vertical-align to the label, form-inline & search-button. A margin-bottom to the form-inline.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.