How Can I Work Around The Need For Bootstrap 3's Form-control Class?

I decided to try out Bootstrap 3 tonight for the first time. I noticed that, in order to get the default, pretty form field styling, you need to add a form-control class to each in

Solution 1:

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: 6px12px;
  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 01px1pxrgba(0, 0, 0, 0.075);
          box-shadow: inset 01px1pxrgba(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 01px1pxrgba(0, 0, 0, 0.075), 008pxrgba(102, 175, 233, 0.6);
          box-shadow: inset 01px1pxrgba(0, 0, 0, 0.075), 008pxrgba(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>

Solution 2:

You realy should check a Django app that render all your Django forms as nice Boostrap forms, simply by using a tag in your template.

Its name is django-bootstrap3. Here's how you use it:

1. Install django-bootstrap3

2. Add bootstrap3 to your INSTALLED_APPS:

   INSTALLED_APPS = (
       ...
       'bootstrap3',
       ...
   )
   

3. Update your template:

   1. load bootstrap3
   2. replace your {{form.as_p}} to {% bootstrap3_form form %}

before:

<formmethod="post"class="form-horizontal"action="" ><divclass="hidden-desktop"><buttontype="submit"class="btn btn-primary"> Save</button></div>
    {% csrf_token %}
    {{ form.as_p }}
    <divclass="actions form-actions"><buttontype="submit"class="btn btn-primary"> Save</button></div></form>

after:

{% extends"base.html" %} 
{% load bootstrap3 %}

<form method="post"class="form-horizontal" action="" >
  <divclass="hidden-desktop"><buttontype="submit"class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button></div>
  {% csrf_token %}
  {% bootstrap_form form  %}
  <div class="actions form-actions">
    <buttontype="submit"class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>

Nothing else to do. Nothing to update in you form. No JavaScript hacks.

Solution 3:

One thing I did was create a mixin that adds the form-control class to each widget.

classBootStrap3FormControlMixin(object):
    def__init__(self, *args, **kwargs):
        super(BootStrap3FormControlMixin, self).__init__(*args, **kwargs)

        for field in self.fields.values():
            _class = field.widget.attrs.get('class', '')
            field.widget.attrs.update({'class': u'%s %s' % (_class, 'form-control',)})