Change button size bootstrap 4 (Django) - django

Question

I'm working with Django and I'm trying to line up a Bootstrap button with a select field. I've got the form inline where I'd like it to be, but I can't seem to make the button smaller to make it align properly. I'm sure there is a simple solution but I've been struggling with this for hours and can't seem to find anything that works for me. Here is a picture as it is currently to give you a better idea of the problem: button not aligned
And here is my current code in my template:
<form class="form-inline" action="{% url 'displayStats:proindvleaders'%}" method="post">
{% csrf_token %}
<div class="row">
{{ form.as_p }}
<button id="submit" type="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
I've tried just setting height on the button ID with css but it doesn't seem to be working for me. Any ideas?

Answer 1

By default bootstrap btn class has padding. Inspect the code in a browser and remove that padding, either by adding a new padding class, or use custom styling class and remove btn, btn-primary etc, but all the same, its better to edit the form, rather than button. Bootstrap default buttons are perfect for most scenario, and most probably you need form styling. I suggest form styling. Below is an example from code.
Ps: i'm replying from phone, code may not be formatted
{% for field in form %}
<div class="fieldWrapper">{{ field.errors }}
<input type="{{ field.field.widget.input_type }}" name="{{ field.html_name }}" id="{{field.id_for_label}}" class="col-12 input-login" placeholder="{{field.label}}" >
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
{% endfor %}