CODEWITHSUNDEEP
csstwitter-bootstrap
Nadishan
Nadishan

Reputation: 580

How right align bootstrap form button?

Please tell me how right align this form "Log in" button using bootstrap. I tired to use pull-right class. But after resizing my button is not in the correct position.

<div role="form">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control"/>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember Me
        </label>
    </div>

    <button class="btn-info btn">Log in</button>                            
</div>

Upvotes: 28

Views: 101890

Answers (3)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

You can use text-right first you have to wrap it in a div like this:

<div class="text-right">
     <button class="btn-info btn">Log in</button>
</div>

LIVE-DEMO

Here is the full code

<div role="form">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control"/>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"/> Remember Me
        </label>
    </div>

    <div class="text-right"> <!--You can add col-lg-12 if you want -->
        <button class="btn-info btn">Log in</button>
    </div>
</div>

enter image description here

Upvotes: 68

phyatt
phyatt

Reputation: 19152

If you are inside a container with rows and columns in Bootstrap4, all the floats don't work properly.

Instead you have to add a spacer column to get things to align.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<p>Float right demo inside a container-fluid, Bootstrap 4</p>
<div class="container-fluid">
  <div class="row">
    <div class="col bg-warning"></div><!-- This is the filler column -->
    <div class="col-auto bg-success">.col-auto (Like a Float Right)</div>
  </div>
</div>

Hope that helps.

Upvotes: 0

Suganth G
Suganth G

Reputation: 5156

pull-right is working fine

DEMO

<button class="btn-info btn pull-right">Log in</button>

Upvotes: 13

Related Questions