Display Django form fields on the "same line"

Question

I would like to display two form fields on the same line and not each one after the other one.

For the moment, I get:

Choice a theme :
   . Datasystems
   . Cameroun

But I would like to display this form like:

Choice a theme:
       . Datasystems                    . Cameroun

My .html file looks like :

{% extends 'Base_Configurations.html' %} 
{% load staticfiles %} 
{% load static %} 
{% block title %}
    <h3> <span class="glyphicon glyphicon-file"></span> Choix du thème DatasystemsEC </align> </h3>
{% endblock %}

{% block content %}

    <form class="form" method='POST' action=''> {% csrf_token %}
        <br></br>
        {{ form }}
        <br></br>
        <input class="button" type="submit" value="Valider le thème" />
    </form>

{% endblock %}

I have also a .css file :

.form-fields {
    border-radius: 4px;
    margin-right: auto;
    width:50%;
    background-color: #f5f5f5;

    }

.form {
    padding-left:8vw;

}

label {
        width: 35%;
        border-radius: 8px; 
        margin-bottom: -20px;
        list-style: none;
}

For the moment, I don't find a way to solve my problem. I looked some tutorials or StackOverflow questions but nothing up to now.

Do you have any idea about this handling?

Answer 1

You can do this by Bootstrap grid system. As suggested in the question, By this there will be two fields on each row.

Try this:

  <div class="container">
    <div class="row">
    {% for field in form  %}
      <div class="col-sm-6">
        <b>{{ field.label_tag }}</b> - {{ field }} 
      </div>
    {% endfor %}
    </div>  
  </div>