I am currently developing my first web application. I require a basic form for users to input a few values. Although I have successfully implemented it, I would prefer the data entry fields to be arranged in a row instead of a column.
The snippets below showcase the use of Bootstrap. However, I believe Bootstrap is not causing the fields to appear in the same place even without its usage.
In 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 %}In 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')
In 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">
...Check out the outcome here:
https://i.sstatic.net/GRRcx.png
I want all three fields to align on the same line (in one row). Any recommendations?
Appreciate your assistance
To provide the solution I utilized:
All I needed to do was modify 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 include:
<div class="col-md-4">
<div class="input submit">
<input type="submit" value="Submit">
</div>
</div>for the submit button.
Much obliged for the prompt assistance.