How can I override the css of existing Django form?

Question

I working with Django Material forms. It is always aligning at the center of the page. I'm able change the column in inspect element. But unable to do it in actual code. I want to align the form at the left of the page. by Default it is acquiring col s 12. How can I override this?

<form method="POST" >

        {% csrf_token %}
        {% form form=form %}{% endform %}


  <div class="input-group" >
    <span class='input-group-btn'>
<input type='submit' value='Subscribe' class='btn btn-primary btn-lg' />
    </span>
  </div>
</form>

Answer 1

A django-material form takes all the container width.

So you can put the form into container and layout the container as you need.

<div class="row">
   <div class="col s5">
       <form method="POST">
           {% csrf_token %}
           {% form form=form %}{% endform %}
       </form>
   </div>
</div>

Btw, the classes for buttons that you use input-group, input-group-btn, etc came from bootstrap and not exists in materializecss framework. Here is the documentation for the available button styles - http://materializecss.com/buttons.html