using bootstrap with play framework scala template

Question

i am using bootstrop with scala template and having trouble in some designing

my code

<fieldset> <legend><h2>@user.firstName&nbsp;@user.lastName <a class="btn pull-right" href="#">Delete</a> <a class="btn pull-right" href="#">Edit</a> </h2> </legend> <div class="form"> <form class="form-horizontal" role="form"> <div style="float:left;position:auto;padding-left:20;"> <div class="form-group"> <label class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <p class="form-control-static">@user.firstName</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <p class="form-control-static">@user.lastName</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">@user.email</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <p class="form-control-static">@user.password</p> </div> </div> </div> <div style="float:right;position:auto;padding-right:20;"> <div class="form-group"> <img src="@routes.Assets.at("images/person-icon.jpg")" height="200" width="150" alt="@user.firstName" class="img-thumbnail"> </div> </div> </form> </div> </fieldset> 

the text on the left not displayed properly,i have tryed adding the padding but it dint work.Can anybody help me .Thanks in advance

Answer 1

DEMO HERE

Use of .container and .row , as of now in your code every form-group has 12 grids but row is not specified thus the error.

<div class="container"> <div class="row"> <div class="col-sm-10 pull-left"> <div class="form-group row"> <label class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <p class="form-control-static">@user.firstName</p> </div> </div> <div class="form-group row"> <label class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <p class="form-control-static">@user.lastName</p> </div> </div> <div class="form-group row"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">@user.email</p> </div> </div> <div class="form-group row"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <p class="form-control-static">@user.password</p> </div> </div> </div> <div class="col-sm-2 pull-right"> <div class="form-group row"> <img src="@routes.Assets.at('images/person-icon.jpg')" height="200" width="150" alt="@user.firstName" class="img-thumbnail"> </div> </div> </div> </div>