Problems with line break in Bootstrap

Question

Problems with line break in Bootstrap

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

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 changing the css code of the boostrap in the form-control class, but nothing has changed. I also tried changing the size of the input, but it also did not change.

<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>

html twitter-bootstrap

asked by anonymous 21.10.2015 / 19:05

3 answers

Abstraction of code with several Replaces Can not use object of type stdClass as array

score 1 · Answer 1

1

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

#idElemento {
 float: left;
}

21.10.2015 / 19:07

score 1 · Answer 2

If you're using Bootstrap, use the Grid system , which, in my opinion, is the best functionality of Bootstrap.

Using grids, your code looks 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><scripttype="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 you can make your site responsive and break down to do what you want.

Follow a example in JSFiddle.

Do not edit the css files, you can customize them on the site itself. In your edition you can change some property and impact on other functionality.



I put the border in the css just for a better understanding of the features.

score 0 · Answer 3

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="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>