Line Breaking Problems in Bootstrap

Question

I’m having trouble breaking bootstrap lines. I need to leave my logo, an image, followed by a label, without breaking the line. However, using the form-control class of boostrap.min.css the line is broken, leaving the image separate from the label. If I put a normal input, without the bootstrap class, the line does not break. I tried to change the css code of boostrap in the form-control class, but nothing has changed. I also tried to change the size of the input, but it has not changed either.

<form action="./InterfaceServlet" method="post" name="searchForm">
   <div class="input-group input-group">
      <img src="images/logoWiber.png" alt="WiBer" width="365" height="261">
      <input type="text" name="search" class="form-control" size="100">
      <button type="submit" class="btn btn-lg">Search it</button>
   </div>
</form>

Answer 1

Use the property "float: left" to leave one next to the other. For example:

#idElemento {
 float: left;
}

Answer 2

If you are using Bootstrap, use grid system, which, in my opinion, is the best feature of Bootstrap.

Using the grids, your code would look like this:

<div class="form-group">
      <div class="col-md-2 col-sm-2 col-xs-2" id="logo">
           <label>Imagem aqui</label>
      </div>

      <div class="col-md-10 col-sm-10 col-xs-10" id="txtLogo">
          <label>Label Aqui </label>
      </div>
   </div>

#txtLogo{
    border: 1px solid;
}

#logo{
    border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="form-group">
      <div class="col-md-2 col-sm-2 col-xs-2" id="logo">
           <label>Imagem aqui</label>
      </div>
          
      <div class="col-md-10 col-sm-10 col-xs-10" id="txtLogo">
          <label>Label Aqui </label>
      </div>
   </div>

With the grid system can make your site responsive and break do what you want.

Follows a example in Jsfiddle.

• Do not edit the css files, you can customize the same on the site itself. In your edition you can change some property and impacting on another functionality.

• I put the edge on css just for a better understanding of the features.

Answer 3

One option would be to use a grid .row, and create side by side the components you want. To align the input and the button, you can also use the class .input-group, see in the example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <img src="http://placehold.it/100x50" class="img-responsive"  />
    </div>
    <div class="col-xs-10 ">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search..." />  
        <span class="input-group-btn">
          <button type="submit" class="btn btn-primary">
            <i class="glyphicon glyphicon-search"></i>
          </button>  
        </span>
       </div>
    </div>
  </div>
</div>