Solution 1 :

First of all, I have to to explain you that you apply m-3 or mx-3 class to the form tag so that the mx-3 gives margin to form tab only and the Name contains and the search bar and result etc. are the child element of the form.

So the mx-3 class will work if you add it to the particular element.

Now, the solution for your problem should be:

If you put class="mx-3" to every form element.

Or you have to apply CSS as follow.


<form action="" method="get" class="weekly_calls_form form-inline text-white justify-content-center">
  <button class="btn btn-primary" type="submit">Search</button>

I have added my custom class to the form tag named weekly_calls_form

Now using this class I apply CSS to all element of the form tag.


.weekly_calls_form > *{
  margin: 0px 5px;

This CSS apply to all the direct child elements of form.

Problem :

Here’s how my django filter form looks like:

enter image description here

I need to horizontally space them a little so that ‘Name contains’ and the search bar, and ‘result’ etc are not glued to each other.

Here’s my html code:

  <form action="" method="get" class="form-inline text-white justify-content-center mx-3">

     <button class="btn btn-primary" type="submit">


I have tried adding m-3, mx-3 etc but they don’t work. Little help will be appreciated. Thanks!


Comment posted by Johar Inam Unnar

one question; how to add some space between the label and search bar? current css does not take care of that space

Comment posted by KuldipKoradia

you want more space between label and search bar, then target that label using parent class and increase margin value for labels

Comment posted by Johar Inam Unnar

But i don’t have a label tag here?

Comment posted by KuldipKoradia

then I think you have direct text in form right?

Comment posted by KuldipKoradia

then you can’t apply CSS to them do one thing .weekly_calls_form > *{margin: 0px 10px;} use this css this make your space double then now, this works perfect I think.