title: How to make Bootstrap file browse button using django-crispy-forms
body: <p>Here is my Django <strong>forms.py</strong> script, using <a href="http://django-crispy-forms.readthedocs.org/en/latest/index.html" rel="nofollow noreferrer">django-crispy-forms</a></p>
  
  <pre><code>#!/usr/bin/env python
  from django import forms
  from .models import Method1
  from crispy_forms.helper import FormHelper
  from crispy_forms.layout import Submit, Layout
  
  class Method1Form(forms.ModelForm):
  
      def __init__(self, *args, **kwargs):
          """ Use for wrapping bootstrap
          This is crispy stuff.
          """
          super(Method1Form, self).__init__(*args, **kwargs)
          self.helper = FormHelper()
          self.helper.form_id = 'id-method1Form'
          self.helper.form_class =  'form-horizontal'
          self.helper.label_class = 'col-lg-2'
          self.helper.field_class = 'col-lg-8'
          self.helper.form_method = 'post'
          self.fields['inputfile_param'].label = "Input File"
          self.fields['species_param'].label = "Species"
          self.fields['norm_mode_param'].label = "Normalization"
          self.fields['logscale_param'].label = "Log Scale"
          self.helper.layout = Layout(
                  'inputfile_param',
                  'species_param',
                  'norm_mode_param',
                  'logscale_param',
            )
          self.helper.add_input(Submit('submit', 'Submit'))
  </code></pre>
  
  <p>I can create the following form:</p>
  
  <p><a href="https://i.stack.imgur.com/okTO7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/okTO7.jpg" alt="enter image description here"></a></p>
  
  <p>As shown there, I'd like to make the browse button with Bootstrap style.
  How can achieve that?</p>
  
  <p>I'm thinking of something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/qrvyk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qrvyk.jpg" alt="enter image description here"></a></p>
  
  <p>Complete <strong>HTML rendered by Django</strong> looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Stuff for django-crispy */
  .asteriskField {
          display: none;
  }
  
  
  .form-control {
      font-size:18px;
      font-family:  "Helvetica Neue",HelveticaNeue;
  }
  
  .form-horizontal {
      padding-left: 120px;
      padding-right: 130px;
      font-size:20px;
      font-family:  "Helvetica Neue",HelveticaNeue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
          &lt;head&gt;
         &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
         &lt;meta charset="utf-8"&gt;
         &lt;/head&gt;
  
  
  &lt;body&gt;
     
      &lt;!--- DISPLAY THE FORM --&gt;
      
  
  &lt;form  id="id-method1Form" class="form-horizontal" method="post"  enctype="multipart/form-data"&gt; &lt;input type='hidden' name='csrfmiddlewaretoken' value='JdUjVaRwOkOxbQmoeSaSHTaDNTlwjs5U' /&gt; &lt;div id="div_id_inputfile_param" class="form-group"&gt; &lt;label for="id_inputfile_param" class="control-label col-lg-2 requiredField"&gt;
                  Input File&lt;span class="asteriskField"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div class="controls col-lg-8"&gt; &lt;input class="clearablefileinput" id="id_inputfile_param" name="inputfile_param" type="file" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="div_id_species_param" class="form-group"&gt; &lt;label for="id_species_param" class="control-label col-lg-2 requiredField"&gt;
                  Species&lt;span class="asteriskField"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div class="controls col-lg-8"&gt; &lt;select class="select form-control" id="id_species_param" name="species_param"&gt;
  &lt;option value="mouse" selected="selected"&gt;Mouse&lt;/option&gt;
  &lt;option value="human"&gt;Human&lt;/option&gt;
  &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="div_id_norm_mode_param" class="form-group"&gt; &lt;label for="id_norm_mode_param" class="control-label col-lg-2 requiredField"&gt;
                  Normalization&lt;span class="asteriskField"&gt;*&lt;/span&gt; &lt;/label&gt; &lt;div class="controls col-lg-8"&gt; &lt;select class="select form-control" id="id_norm_mode_param" name="norm_mode_param"&gt;
  &lt;option value="genecount_norm" selected="selected"&gt;Gene Count&lt;/option&gt;
  &lt;option value="totalscore_norm"&gt;Total Score&lt;/option&gt;
  &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;div class="controls col-lg-offset-2 col-lg-8"&gt; &lt;div id="div_id_logscale_param" class="checkbox"&gt; &lt;label for="id_logscale_param" class=""&gt; &lt;input class="checkboxinput" id="id_logscale_param" name="logscale_param" type="checkbox" /&gt;
                      Log Scale
                      
  
  
      
  
  
  
  
      
  
  
  
                  &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;div class="aab controls col-lg-2"&gt;&lt;/div&gt; &lt;div class="controls col-lg-8"&gt; &lt;input type="submit"
      name="submit"
      value="Submit"
      
          class="btn btn-primary"
          id="submit-id-submit"
      
      
      /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt;
  
      &lt;!--- END FORM DISPLAY--&gt;
  
      
  &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>