I am developing a form in Bootstrap 3 that should have a series of text controls and images. A form takes up 100% of its container, and text inputs are also set to 100% of the width. This works well when I don't need to worry about the image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code below):
Current look
I need to place the image to the right of these form controls and reduce their width accordingly:
Mockup
I would just put Bootstrap in a different grid column to handle this, but I would also like the columns to return to full width when the image is done, as shown in the layout image above. Something similar to the "dense" image layout in Microsoft Word. I tried to set the class float:right; and display:inline-block' in the image class, but it fails correctly:
not working yet
Does anyone know how to make the project work the way I described it in the layout?
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div> <h2>New Guest</h2> <form class="form-horizontal" role="form"> <img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" /> <div class="form-group" id="group-tbFirstName"> <label for="tbFirstName" class="col-sm-3 control-label">First Name</label> <div class="col-sm-9"> <input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" /> </div> </div> <div class="form-group" id="group-tbLastName"> <label for="tbLastName" class="col-sm-3 control-label">Last Name</label> <div class="col-sm-9"> <input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" /> </div> </div> <div class="form-group" id="group-optGender"> <label for="optGender" class="col-sm-3 control-label">Gender</label> <div class="col-sm-9"> <input type="text" class="form-control" id="optGender" placeholder="Gender" value="" /> </div> </div> <div class="form-group" id="group-tbAge"> <label for="tbAge" class="col-sm-3 control-label">Age</label> <div class="col-sm-9"> <input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" /> </div> </div> <div class="form-group" id="group-dtDateOfBirth"> <label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label> <div class="col-sm-9"> <input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" /> </div> </div> </form> </div> </body> </html>
The specific effect I'm going to do is to make the inputs below the image expand to 100% again. Like this:
I know that the image can be floated, but I do not want all the inputs under it to be the same width than those that were on the lines with the image. I want them to expand.
source share