CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Gianluca Ghettini
Gianluca Ghettini

Reputation: 11628

Bootstrap, multi field search bar

I'm designing a multi filed search bar for a new website. The website is made in PHP/Javascript/Bootstrap

I need to create 4 fields (3 text field + 1 search button) and they should be aligned in a

<div class="row">
   <div class="col-lg-8 col-lg-offset-2">
       ..here the fields plus button...
   </div>
</div>

How can I do that? I tried form-inline but this is the result:

enter image description here

Upvotes: 1

Views: 3692

Answers (2)

theCodeSurgeon
theCodeSurgeon

Reputation: 460

If you do not have particularly problematic requirements like old browser support, you could have fun with Flex.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Fernando Torres
Fernando Torres

Reputation: 470

You have to distribute until 12 cols and center your div like:

Change Your code: 

<div class="row">
   <div class="col-lg-8 col-lg-offset-2">
       ..here the fields plus button...
   </div>
</div>

For: 

<!--Adding some styles for center the row-->
<div class="row" style="margin: 0 auto; display:block; width: 100%;">
    <div class="col-lg-2">Field One</div>
    <div class="col-lg-2">Field Two</div>
    <div class="col-lg-2">Field Tree</div>
    <div class="col-lg-6">Your search field</div>
</div>

Please see this for: http://getbootstrap.com/css/#grid more about it.

Upvotes: 0

Related Questions