Getting Started with Flask: Installation, Project Setup, and Bootstrap Integration

This tutorial walks through installing Flask, creating a new Python Flask project, customizing static and template directories, running the app, and integrating Bootstrap via flask‑bootstrap to build a simple web page with navigation.

360 Quality & Efficiency
360 Quality & Efficiency
360 Quality & Efficiency
Getting Started with Flask: Installation, Project Setup, and Bootstrap Integration

Flask is a lightweight Python web micro‑framework built on Werkzeug and Jinja2, allowing rapid development of web sites and services.

Install Flask using the command pip install Flask.

Create a new Flask project in PyCharm (or another IDE) by selecting Flask as the project type and naming it flask_test; the default template and folder settings are sufficient.

The generated file structure includes a static directory for CSS/JS, a templates directory for HTML files, and a flask_test.py script.

You can customize the static and template locations with: app = Flask(__name__, static_folder='', template_folder='') Run flask_test.py (e.g., right‑click → Run). The app starts on port 5000; accessing http://127.0.0.1:5000/ invokes the hello_world view.

To add Bootstrap, first install the extension with pip install flask-bootstrap, then import and initialize it in your script:

from flask_bootstrap import Bootstrap<br/>bootstrap = Bootstrap()<br/>bootstrap.init_app(app)

Create template files such as base.html (the layout that extends Bootstrap’s base) and hello_world.html. Place them in the templates folder.

Update the route to render the template:

@app.route('/')<br/>def hello_world():<br/>    return render_template('hello_world.html')

After restarting the server and visiting http://127.0.0.1:5000/, a page with a navigation bar and styled content appears, demonstrating Flask’s simplicity and the power of integrating Bootstrap.

The tutorial concludes with a brief preview of future Flask template topics.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

Web DevelopmentFlaskTutorialBootstrap
360 Quality & Efficiency
Written by

360 Quality & Efficiency

360 Quality & Efficiency focuses on seamlessly integrating quality and efficiency in R&D, sharing 360’s internal best practices with industry peers to foster collaboration among Chinese enterprises and drive greater efficiency value.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.