CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
pappu_kutty
pappu_kutty

Reputation: 2488

pull-right bootstrap changing the div order of display

I need to display divs in which way I have placed, but when I try adding pull-right, div orders are getting changed. I need login button to extreme right, but this goes left of the two input boxes. I am trying to get two text boxes left to login button.

I know pull-right makes divs float to right, but is there any way I can give preference to the order of placing the divs to its right? 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>

<div class="row" style="background-color: #332619; color: #fff !important; padding-top: 25px; padding-bottom: 10px; margin-left:0px; margin-right:0px">
  <div id="sellerLoginBox" class="col-lg-6 col-lg-offset-6">
    <div class="form-group pull-right">
      <input type="text" class="form-control" id="login_Email" placeholder="Email">
    </div>
    <div class="form-group  pull-right">
      <input type="password" class="form-control" id="login_Password" placeholder="Password">
    </div>
    <div class="form-group  pull-right">
      <button id="LoginButton" class="btn btn-success btn-flat">Login</button>
    </div>
  </div>
  <div class="col-lg-6 col-lg-offset-6">
    <span class="pull-right"> <a href="#" class="forgetPassword">forgot password ?</a></span>
  </div>
</div>

Fiddle is below

http://jsfiddle.net/mnzp54fm/1/

Upvotes: 3

Views: 5205

Answers (2)

Ted
Ted

Reputation: 14937

You need to change your markup a little, like so:

<div class="row" style="background-color: #332619; color: #fff !important; padding-top: 25px; padding-bottom: 10px; margin-left: 0px; margin-right: 0px">
    <div id="sellerLoginBox" class="col-lg-6 col-lg-offset-6 text-right">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" id="login_Email" placeholder="Email">
                <input type="password" class="form-control" id="login_Password" placeholder="Password">
                <button id="LoginButton" class="btn btn-success btn-flat">Login</button>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-lg-offset-6">
        <span class="pull-right"><a href="#" class="forgetPassword">forgot password ?</a></span>
    </div>
</div>

See a running example here

Upvotes: 1

Francis Ezengige
Francis Ezengige

Reputation: 108

To solve this problem, wrap all the first 3 divs namely: email, password, and login button in another div and pull that div to the right and remove pull right in those 3 divs as shown below

<div class="row" style="background-color: #332619; color: #fff !important; padding-top: 25px; padding-bottom: 10px; margin-left:0px; margin-right:0px">
  <div id="sellerLoginBox" class="col-lg-6 col-lg-offset-6">
    <div class="pull-right">
      <div class="form-group">
        <input type="text" class="form-control" id="login_Email" placeholder="Email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" id="login_Password" placeholder="Password">
      </div>
      <div class="form-group">
        <button id="LoginButton" class="btn btn-success btn-flat">Login</button>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-lg-offset-6">
    <span class="pull-right"> <a href="#" class="forgetPassword">forgot password ?</a></span>
  </div>
</div>

Upvotes: 3

Related Questions