Welcome to the fifth tutorial in our Flask Tutorial Series. In this tutorial, we will be discussing static files and integrating Bootstrap into our Flask application.
Static files are any files that are served to the client (browser) without any modification. These files could be CSS stylesheets, JavaScript files, images, fonts, etc. In a Flask application, these static files are typically stored in a subdirectory named ‘static’ within the application’s root directory.
Bootstrap is a popular front-end framework that allows developers to create responsive and mobile-first websites quickly and easily. Integrating Bootstrap into a Flask application helps to enhance the visual appearance and user experience of the website.
To start, let’s create a new Flask application or use an existing one. We will create a new directory for our project and install Flask using pip.
mkdir flask_bootstrap_project
cd flask_bootstrap_project
pip install FlaskNext, let’s create the basic structure of our Flask application. Create a new file named app.py and add the following code:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)We will also create a new folder named ‘templates’ within the project directory. Inside the ‘templates’ folder, create a new HTML file named index.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Bootstrap Tutorial</title>
</head>
<body>
<h1>Welcome to Flask Bootstrap Tutorial</h1>
</body>
</html>Now, let’s create a new subdirectory named ‘static’ within the project directory. Inside the ‘static’ folder, we will download and place the necessary Bootstrap files. You can either download Bootstrap files from the official Bootstrap website or use a CDN link. For this tutorial, we will use the CDN link.
Open the index.html file and add the following code to include Bootstrap files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Bootstrap Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Flask Bootstrap Tutorial</h1>
</body>
</html>Now, if you run the Flask application using the command python app.py and visit http://127.0.0.1:5000/ in your browser, you should see the contents of the index.html file styled using Bootstrap CSS.
That’s it! You have successfully integrated Bootstrap into your Flask application. You can now start customizing and building your website using the Bootstrap framework. I hope you found this tutorial helpful. Stay tuned for more tutorials in our Flask Tutorial Series. Thank you for reading!
Do you have or are you planning on making a video about flask forms?
short and sweet. Thank you very much
(6:48) a better way would be :
pip install Flask-Bootstrap
{% extends "bootstrap/base.html" %}
…
{% block scripts %}
{{super()}}
<script src="{{url_for('static', filename='js/hello.js')}}"></script>
{% endblock %}
For the hello.js application I'm unable to get the timed pop-up window alert. I've turned off blockers on Safari and Chrome and it doesn't seem to matter. Any ideas? Thanks for any additional help.
👏🏾👏🏾
I've learned a lot from you; could you help clarify all basic advanced and fundamental topics
Why don't you use url_for ?
i love his channel.
Don't forget anthentication and authorization 😊later
I like your channel. Very diverse.
Great series, thanks