CODEWITHSUNDEEP
csstwitter-bootstrap
Eddy
Eddy

Reputation: 3703

Unwanted line break between elements

I need to have a text input and a button using bootstrap but for some reason there's unwanted line break created between them. I'm new to bootstrap so I'm not sure what's going on. 

<div class="row" style="border:0px solid black">
  <div class="col-xs-2 col-md-2" style="border:0px solid green"></div> 

  <div class="col-xs-8 col-md-8" style="border:2px solid green">    

  <p:autoComplete id="acSimple" value="#{home.searchKeywords}" completeMethod="#{home.completeText}" size="65" /> <!-- size="65" -->

  <p:commandLink action="#{home.goToSearchResults}" onclick=" $('.prgrs').show();">
  <h:graphicImage name="images/searchbutton.jpg" class="img-responsive" style="margin-left:0px; margin-bottom:-0px;"  />
  </p:commandLink>
  </div>        

  <div class="col-xs-2 col-md-2" style="border:2px solid green"></div>
</div>

This is the end result:

enter image description here

and what I need is for the button to be just to the right of the text input.

EDIT: Once I use display: inline-block; as per one of the answers it works for larger screens, but not for smaller ones. Here's a screenshot:

enter image description here

Any advice?

Upvotes: 0

Views: 113

Answers (2)

G Surendar Thina
G Surendar Thina

Reputation: 36

You must know, not only the page but also every division will be divided into 12 columns. And in your code, you have filled up all these columns by the following:

     <div class="col-xs-2 col-md-2" style="border:0px solid green"></div>
     <div class="col-xs-8 col-md-8" style="border:2px solid green"></div>
     <div class="col-xs-2 col-md-2" style="border:2px solid green"></div>

This has a complete coverage of the whole page. So., the master division could be given a class 'col-md-12' The following code must help:

<div class="row col-xs-12 col-md-12" style="border:0px solid black">
    <div class="col-xs-2 col-md-2" style="border:0px solid green"></div> 
    <div class="col-xs-8 col-md-8" style="border:2px solid green"></div>        
    <div class="col-xs-2 col-md-2" style="border:2px solid green"></div>
</div>

Upvotes: 0

odedta
odedta

Reputation: 2478

Use for both: display: inline-block; for the button use float: right; for the text input use float: left;

Upvotes: 2

Related Questions