Menu
I have this very simple code using Bootstrap 3:
<html> <body> <main class="container" role="main"> <form class="simple_form form-horizontal"> <div class="form-group text required campaign_url"> <label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label> <textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea> </div> and it appears like this:
Notice how tho labels and the inputs are sticking to the left. Inspecting those elements I found this:
.form-horizontal .form-group { margin-left: -15px; margin-right: -15px; } Why is that there? I know it's trivial to remove, but it makes me wonder whether the way I'm using Bootstrap is wrong. How should I use it?
402
The Bootstrap . row uses negative margins (-15px) to counteract the padding (15px) of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container.
l - sets margin-left or padding-left. r - sets margin-right or padding-right. x - sets both padding-left and padding-right or margin-left and margin-right. y - sets both padding-top and padding-bottom or margin-top and margin-bottom.
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in .form-inline as needed.
If you want to use bootstrap to control line spacing it is recommended to use the margin and padding settings in bootstrap. i.e. my-0 and py-0.
It's happening because you are using form-horizontal which is meant to be used as a row along with col-*'s for layout. From the Bootstrap docs:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a
<form>). Doing so changes.form-groupsto behave as grid rows, so no need for.row.
So if you simply remove the form-horizontal the negative margin goes away.
http://codeply.com/go/QQnqgfKv9v
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
