Flask/WTForms - how can I make a form inline? - flask

Question

Here is the code:
<form class="form-inline" action="" method="post">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4"></legend>
<div class="form-group">
... form fields here ...
</div>
</fieldset>
<div class="form-group-submit">
{{ form.submit(class="btn btn-outline-primary") }}
</div>
</form>
I am not sure how to make this field inline...bootstrap docs say to set class to .form-inline but that is not working here

Answer 1

In the following example, I will show you the use of form-inline to align fields horizontally:
Suppose we have a form login_form, which is used in the view function login, that in turn renders the HTML file login.html
The form model:
class login_form(FlaskForm):
some_hiden_field = HiddenField()
username = StringField('User Name :', validators=[DataRequired()])
password = PasswordField('Password :', validators=[DataRequired()])
submit_btn = SubmitField('Submit')
The view function:
#app.route('/', methods=['Get', 'post'])
def login():
# some code
my_form = login_form()
# some code
return render_template('login.html', form=my_form)
login.html:
{% extends "mybase.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block page_content %}
<form class="form-inline" method="POST">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.username.label }} {{ form.username(class="form-control") }}
</div>
<div class="form-group">
{{ form.password.label }} {{ form.password(class="form-control") }}
</div>
<div class="form-group">
{{ form.submit_btn(class="btn btn-default") }}
</div>
</form>
{% endblock %}
Finnally, as you know, in the above HTML code if you replace <form class="form-inline" method="POST"> with <form method="POST"> you will get the vertical alignment style.
I will add more clarification based on the comments below.
import Flask-Bootstrap
import Flask-WTF
Take them copy and paste
Imports collection
from flask import Flask, render_template, session, redirect, url_for, flash, request
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
import wtforms
from wtforms import StringField, FloatField, SubmitField, IntegerField, TextAreaField, DateField, DateTimeField, PasswordField, BooleanField, SelectField, FileField, HiddenField, Field, FieldList, FormField, Form
from wtforms.validators import Optional, NumberRange, DataRequired, Length, Email, Regexp