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.

HTML

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

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.

CSS

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

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

Here’s how my django filter form looks like:

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">
       {{myfilter.form|bootstrap}}

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

  </form>

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