Karl Morrison Karl Morrison - 7 months ago 95
HTML Question

Bootstrap 3 checkbox right side of text / button on own row

I have the current setup.

<div class="container" data-ng-controller="publicHome">
<div class="col-md-4 col-md-offset-4" style="background: black;">
<form data-ng-submit="signIn()" class="form-horizontal">


<div class="form-group">
<input type="email" data-ng-model="email" placeholder="email" class="form-control">
</div>


<div class="form-group">
<input type="password" data-ng-model="password" placeholder="password" class="form-control">
</div>


<label class="checkbox pull-right">
remember me
<input type="checkbox" data-ng-model="rememberMe">
</label>


<div class="form-group center-block">
<button type="submit" class="btn btn-success center-block">sign in</button>
</div>


</form>
<div data-ng-bind="message" class="text-center">

</div>
</div>
</div>


I am trying to:


  • Get the check box on the right side of the remember me text AND have both of the right side of the form

  • Have the button on it's own row underneath the remember me



As you can see I'm nearly there!

Answer

Use:

<div class="form-group mycheckboxdiv">
        <label>
            remember me
          <input type="checkbox" data-ng-model="rememberMe" class="pull-right mycheckbox">
        </label>

      </div>

and for your own css:

.mycheckbox{
  margin-top:5px;
  margin-left:5px;
}
.mycheckboxdiv{
   text-align:right;
}

See this: http://www.bootply.com/a6Jl6EDD8R