What is the purpose of having a separate group of elements in Bootstrap?
The Bootstrap documentation contains the code as part of the navigation example :
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
What is the purpose div
with the class form-group
here? The name suggests this is for grouping form elements, but there is only one child.
+3
source to share
1 answer
At its core, it sets some spacing between elements. This is from the Bootstrap CSS file:
.form-group {
margin-bottom: 15px;
}
It does a lot more if you dig their CSS. .row
same as .row
in .form-horizontal
, for example:
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
In the case of the navbar in your example, this is in their CSS:
@media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
}
@media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
.navbar-form .form-group:last-child {
margin-bottom: 0;
}
}
View complete CSS file for Bootstrap here
+3
source to share