CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
user6630815
user6630815

Reputation: 65

bootstrap input-prepend makes two div inline (in a same line),no new line

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.jss"></script>

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

the result is :divs inline

So,two divs are in the same line.How can i have a new line? The default sytle of div is block,is that mean when I use prependedInput and appendedInput ,it will change it to inline?

bootstrap version is 2.3.2

Upvotes: 1

Views: 476

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

As you see the documentation provided in Bootstrap 2.3.2, it doesn't state that your classes input-append and input-prepend will be in the same line.

It's just shown for clarity purpose. But will also see that you will get it in a new line when you change it to smaller screen i.e. col-xs-12.

Do it be either <br> or col-xs-12:

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.jss"></script>
<form class="bs-docs-example">
  <h4>Using <code>col-xl-12</code></h4>

  <div class="col-xl-12">
    <div class="input-prepend">
      <span class="add-on">@</span>
      <input class="span2" id="prependedInput" type="text" placeholder="Username">
    </div>
  </div>

  <div class="col-xl-12">
    <div class="input-append">
      <input class="span2" id="appendedInput" type="text">
      <span class="add-on">.00</span>
    </div>
  </div>
</form>

<h4>Using <code>&lt;br/&gt;</code></h4>

<form class="bs-docs-example">
  <div class="input-prepend">
    <span class="add-on">@</span>
    <input class="span2" id="prependedInput" type="text" placeholder="Username">
  </div>
  <br>
  <div class="input-append">
    <input class="span2" id="appendedInput" type="text">
    <span class="add-on">.00</span>
  </div>
</form>

Upvotes: 1

Related Questions