I wondered why the answer below got downvotes first. I found my answer about the form-group
in stead of the form-control
class. The class form-control
adds many CSS rules.
You should try to control your form output in the first place: https://stackoverflow.com/a/8474452/1596547
If you can't you could try the same as below. Apply the same rules on your inputs instead of the form-control
, like:
input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Less
With LESS > 1.4 you can use :extend()
, see: https://stackoverflow.com/a/15573240/1596547. You can use this for the above by adding a rule to your less files:
input {
&:extend(.form-control all);
}
Also see: Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?
The form-group
is an container-div around your input / label constructs it only adds a margin-bottom: 15px;
. You could build your forms without it. For this reason it is not required.
With css you could make some workarounds. I don't think you can avoid Javascript always.
I don't know the HTML-structure of your Django forms. I have used the example form from http://getbootstrap.com/css/#forms and strip the form-control
containers. Then i "fix" the differences. NOTE i also add a <br>
tag in front of the submit button.
See: http://bootply.com/73370
1) form-group
adds a margin-bottom: 15px;
to fix this i add this margin to the input tags:
input {
margin-bottom: 15px; }
This works accept for the checkbox (and radio). The Bootstrap CSS defines input[type="radio"], input[type="checkbox"] {
line-height: normal;
margin: 4px 0 0;
}
which overrules (caused by CSS Specificity, see: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ ) the css for input above.
So the final rule will be:
input, input[type="checkbox"] {
margin-bottom: 15px;
}
2) the label of the checkbox also differs. NOTE the checkbox don't have a surrounding form-control
but a checkbox
class in stead. The css rules for the label text are: .radio label, .checkbox label {
cursor: pointer;
display: inline;
font-weight: normal;
margin-bottom: 0;
}
i this case you can't use CSS only (the label is a parent of the input checkbox, and there is no parent selector in CSS, see: Is there a CSS parent selector?). With jQuery you can select the label and add a class:
$('input[type="checkbox"]').parent("label").addClass('checkboxlabel');
Now add this class to your CSS with the same rules as the .checkbox label
:
.checkboxlabel
{
cursor: pointer;
display: inline;
font-weight: normal;
margin-bottom: 0;
}
Now both forms look basically the same i think:
Also read: Django Forms and Bootstrap - CSS classes and <divs>