Bootstrap, align input with label to button without label, vertical form / not horizontal
Adding margins is not the best idea. What if the label
font-size
changes? You'll need to adjust the margin
as well.
Make the button
to act as a block
.btn.btn-as-block {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class="row">
<div class="col-xs-9">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label> </label>
<div class="btn btn-danger btn-as-block">Remove</div>
</div>
</div>
</div>
</div>
Bootstrap is a great structure in which you can create any kind of html just you need to understand the structure. Always try to use only bootstrap classes but not the external things.
Check this bootstrap only structure with the desired output
<div class='container' style='width:200px; margin: 50px;'>
<div class="row">
<div class="col-lg-12">
<label>Name</label>
<div class="row">
<div class="col-xs-10">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<div class="btn btn-danger">Remove</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example : https://jsfiddle.net/r6o5hysk/2/
Maybe this is a little bit late because the OP was from 2015 but anyway, it maybe useful for somebody using the newest Bootstrap 4.3.1.
Actually you do not need to include any extra CSS or do any kind of complex tweaks, just taking advantage of how row
, form-row
, col
classes behave side by side and how its padding
and margins
coexist each other is enough.
This is the structure you need to follow make it work:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<form>
<div class="form-row">
<div class="col-md-12">
<label for="name">User data:</label>
<div class="form-row">
<div class="col-5">
<input type="text" class="form-control" id="name" placeholder="Alex Ventura">
</div>
<div class="col-5">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="alexventuraio">
</div>
</div>
<div class="col-2">
<button type="submit" class="btn btn-primary">Contact</button>
</div>
</div>
</div>
</div>
</form>
</div>
I hope it could give an idea to anyone else with the same problem. Here is my pen just for further reference.