pb4759jh68 pb4759jh68 - 1 year ago 94
HTML Question

Bootstrap Right Align Column

I am having trouble with Bootstrap Columns.

Here is my fiddle

Code



.index_heading {
background-color:black;
color:white;
}

.header_index {
}

.border {
border:1px solid red;
margin-right:100px;
}
.login {
margin-top:3%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row index_heading">
<div class="col-md-6 border pull-right">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="login">
<div class="col-xs-3">
<input type="text" name="username" class="form-control" placeholder="username">
</div>
<div class="col-xs-3">
<input type="password" name="password" class="form-control" placeholder="password"><br>
</div>
<div class="col-xs-2">
<input type="submit" name="login" value="login" class="form-control btn btn-primary">
</div>
</div>
</form>
</div>
</div>





What I want is for the login
button
to be next to the right horizontal line.

I have tried
pull-right
and
text-right
but neither of them work.

Any solutions would be helpful.

Answer Source

You can you column ordering to move columns around.

So for you log in column you could use

<div class="col-xs-2 col-xs-push-4">

Which will move that div over four columns from its normal place.