How to Work Around The Need for Bootstrap 3's Form-Control Class

How can I work around the need for Bootstrap 3's form-control class?

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:

Install django-bootstrap3

Add bootstrap3 to your INSTALLED_APPS:

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

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

before:

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

after:

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

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

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

bootstrap 3: position absolute not work with form-control class

here is js fiddle for you

http://jsfiddle.net/pragneshok/K7jQ7/1/

HTML CODE

<div style="padding:30px;" class="form-group">
    <label for="files" class="col-lg-1 control-label">form</label>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6" id="cnt">
                <div class="input-group input-group-md">    <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>

                    <div id="InputsWrapper">
                        <input id="docs" onclick="openKCFinder(this)" class="form-control" type="text" name="files[]" placeholder="">
                    </div>
                </div>
            </div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>

        </div>
    </div>
</div>

jQuery code :

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#cnt"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div class="input-group input-group-md">   <span class="input-group-addon"><a data-content="" data-original-title="123" data-placement="top" rel="popover" class="help-box"><i class="fa fa-file-text"></i></a></span><div id="InputsWrapper"><input type="text" placeholder="" name="files[]" class="form-control" onclick="openKCFinder(this)" id="docs"></div></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

UPDATED FIDDLE

http://jsfiddle.net/pragneshok/K7jQ7/3/

New updated fiddle

http://jsfiddle.net/pragneshok/K7jQ7/5/

Bootstrap 3: How to use .col classes on .form-control classes

You need to include another .row div inside your col-sm-8 column and surround each form control with a column div. Since .form-control specifies a width of 100%, they will expand to the width of their parent container. Having the columns around the form controls allows this to happen.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">  <form id="user-edit-account" data-toggle="validator" class="form-horizontal">    <h4>Account Settings</h4>    <div class="form-group">      <label for="user-profile-name" class="control-label col-sm-4">Location*</label>      <div class="col-sm-8">        <div class="row">          <div class="col-xs-6">            <select id="profile-country" class="form-control" name="country">              <option value="">Please select a destination</option>              <option value="India">India</option>              <option value="China">China</option>              <option value="Asia">Asia</option>            </select>          </div>          <div class="col-xs-6">            <input type="text" class="form-control" id="profile-region" placeholder="City" value="">          </div>        </div>      </div>    </div>  </form></div>

How to avoid form-control in all inputs with Twitter Bootstrap 3?

You could edit forms.less and recompile the css, but it could be tricky because you don't want all inputs or text areas to have that .form-control styling.

If you have an ID for your form that you want to apply it to, this should help:

$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');

You would need to make sure you are adding all the form field types that are in your form, but that above line would probably cover most of them. This is pretty hacky though, depending on your framework there may be some sort of mixin or function to include class names in auto generated forms.

how to create connected buttons for form controls with bootstrap 3?

You need to wrap the button in a span with class .input-group-btn like so:

<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn"><!-- DO THIS -->
  <button class="btn btn-success btn-add" type="button">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</span>

DEMO: http://www.bootply.com/BNUUlFK5xX

CSS: Form control alignment using bootstrap 3

You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms

HTML:

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>

Demo: https://jsfiddle.net/xprh2tno/12/

Bootstrap 3 form-control not stacking

If you are looking to have clean spacing between the fields, I would just remove the form-control class from each of the divs as they are not necessary, and then add some margin to the stacked divs:

<div class="row">
    <div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="well sombra-externa">
            <div class="fonte-main"><h4>Complete seu cadastro!</h4></div>
            <legend></legend>
            <form id="completar-cadastro" class="form-horizontal clearfix">
            <fieldset>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="fisica"><input name="tipopessoa" value="fisica" id="fisica" type="radio"> Pessoa Física</label>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="juridica"><input name="tipopessoa" value="juridica" id="juridica" type="radio"> Pessoa Jurídica</label>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="nomecliente">Nome *</label><input name="nomecliente" class="form-control" value="" placeholder="Seu nome completo" id="nomecliente" type="text">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="cpf">CPF *</label><input name="cpf" value="" placeholder="Insira seu CPF" id="cpf" type="text" class="form-control">
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <label for="cpf">DDD *</label><input name="ddd" class="form-control" value="" placeholder="DDD" id="ddd" type="text">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <label for="cpf">Telefone *</label><input class="form-control" name="telefone" value="" placeholder="Insira seu CPF" id="telefone" type="text">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="cpf">CEP *</label><input name="cep" value="" class="form-control" placeholder="Insira seu CEP" id="cep" type="text">
                </div>
                </fieldset>
            </form>
        </div>
    </div>
    <div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="well sombra-externa">colocar passos</div>

    </div>
</div>

and some CSS to add spacing between each stacked layer:

fieldset div {
    margin-bottom: 10px;
}

Bootply here.

On your site, you have the following defined in both template.css and bootstrap.css:

@media screen and (min-width: 768px)
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .inputbox {
   width: auto; 
}

You should remove this as it is causing the problems you have above.