ron tornambe ron tornambe - 5 months ago 12
CSS Question

Why can't I get bootstrap to float correctly?

I would like to have a password input and button be on the same line. Here's a link to my test site.

HTML

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst Log-In Form</title>
<link href='css/log-in.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container center_div">
<form name="form-login" id="form-login" class="form-horizontal well center-form-small">
<h1>Log-In</h1>
<div id="identification">
<img id="photo" src="#" alt="photo" />
<input id="fullname" type="text" readonly="readonly" />
</div>
<div id="form-elements">
<p class="text-center">
<button id="facebook-login" class="btn btn-primary" >Login with Facebook</button>
</p>
<p class="text-center">
<button id="google-login" class="btn btn-primary" >Login with Google</button>
</p>
<p class="text-center">
<button class="btn btn-success" >- OR ENTER -</button>
</p>
<div class="form-group">
<input type="text" class="form-control" required id="email" name="email" placeholder="Email" />
</div>
<div class="form-group row" style="width: 100%">
<div class="col-sm-8">
<input type="password" class="form-control pull-left" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
<button id="show-pwd" class="btn btn-primary" tabindex="-1">show</button>
</div>
<div class="form-group">
<button type="submit" id="login-submit" name="login-submit" class="btn btn-default">Log-In</button>
</div>
</div>
<div class="form-group">
<a id ="goto-account" href="#">create account</a>
<a id ="reset-pwd" href="#" >reset password</a>
</div>
</form>
<div id="request-email">
<form id="request-email-form" class="form-horizontal well center-form-tiny">
<div class="form-group">
<input type="email" class="form-control" required id="email" name="email" autofocus="true" placeholder="Your preferred Email" />
</div>
<div class="form-group">
<button type="submit" id="login-submit" name="login-submit" class="btn btn-default">Send Email</button>
</div>
<a id="reset-close" href="#">close</a>
<input type="hidden" id="subject" name="subject" value="Writer's Tryst - reset password." />
<input type="hidden" id="msg" name="msg" />
<input type="hidden" id="name" name="name" value="N/A" />
<input type="hidden" id="emailmsg" name="emailmsg" value="Reset password email sent." />
<input type="hidden" id="ishtml" name="is-html" value="Reset password email sent." />
</form>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>

Answer

Change the row that has your password field and button to:

<div class="form-group row" style="width: 100%">
    <div class="col-sm-8">
        <input type="password" class="form-control pull-left" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
    </div>
    <div class="col-sm-4">
        <button id="show-pwd" class="btn btn-primary" tabindex="-1">show</button>
    </div>
</div>

Bootstrap is built on a 12 column grid, so try and make sure that your col-size-x columns add up to 12 per row.

Comments