HTML, CSS, flask_wtf how to change form field locations - html

Question

I'm working on my first webapp. I need a simple form for the user to submit a few values. I got it working, but I would like the data entry fields to be on a row instead of in a column.
You can see bootstrap used in the snippets below. I don't think that is involved because the fields render in the same locations without using it.
base.html:
{% extends 'bootstrap/base.html' %}
{% block title %}
...
{% endblock %}
{% block navbar %}
...
{% endblock %}
{% block content %}
<div class="container">
...
{# application content needs to be provided in the app_content block #}
{% block app_content %}{% endblock %}
</div>
{% endblock %}
forms.py:
from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired, IPAddress, NumberRange, length
class SnmpQueryForm(FlaskForm):
ip = StringField('IP Address', validators=[IPAddress()])
mask = IntegerField('Mask bits',
validators=[DataRequired(),
NumberRange(22, 32)]
)
snmpcmstr = StringField('Community String',
validators=[DataRequired(),
length(max=20)]
)
submit = SubmitField('Submit Query')
template.html:
{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block app_content %}
<h1>Enter SNMP Query Information</h1>
<form action="", method="post">
<div class="row">
<div class="col-md-2">
{{ wtf.quick_form(form) }}
</div>
</div>
</form>
<br>
<br>
<div class="container">
...
Here is the result:
I would like the three fields to be on the same line (in the same row). Any suggestions?
Thank you
Just to add the solution I used for posterity:
All I had to do was change Lakindu's POC code to:
<div class="col-md-4">
<div class="form-group">
{{wtf.form_field(form.ip, class="form-control", placeholder="Enter IP") }}
</div>
</div>
for each input field and add:
<div class="col-md-4">
<div class="input submit">
<input type="submit" value="Submit">
</div>
</div>
for the submit button.
Thank you for the quick help.

Answer 1

This is a proof of concept of what you trying to achieve.
You can use col-md-4 in a row and a container class in order to get three input fields to a single row.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form action="" , method="post">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>IP address</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Mask bits</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Community string</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>