In this tutorial, we will learn how to integrate Bootstrap into a Flask application to create a modern and responsive web application. Bootstrap is a popular CSS framework that allows developers to easily create stylish and responsive websites.
Prerequisites:
Before we get started, make sure you have the following prerequisites installed on your system:
- Python
- Flask
- Bootstrap
Let’s get started!
Step 1: Create a new Flask project
First, create a new directory for your Flask project and navigate to it in your terminal. Then, create a new virtual environment by running the following command:
python -m venv venvActivate the virtual environment by running the following command:
source venv/bin/activateInstall Flask by running the following command:
pip install FlaskNow, create a new Flask app by creating a new Python file, for example, app.py, and add the following code:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return 'Hello, World!'
if __name__ == '__main__':
app.run()Run your Flask app by running the following command:
python app.pyYour Flask app should now be running on http://127.0.0.1:5000/.
Step 2: Integrate Bootstrap into your Flask app
To integrate Bootstrap into your Flask app, you first need to download Bootstrap from the official website (https://getbootstrap.com/docs/4.6/getting-started/download/) and extract the files into your Flask project directory.
Create a new directory in your Flask project directory called ‘static’. Move the ‘css’ and ‘js’ folders from the Bootstrap files into the ‘static’ directory.
Next, create a new directory in your Flask project directory called ‘templates’. Create a new HTML file in the ‘templates’ directory, for example, index.html, and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Flask Bootstrap App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
</head>
<body>
<div class="container">
<h1>Welcome to Flask Bootstrap App</h1>
</div>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>Update your app.py file to render the index.html template by updating the index route:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()Run your Flask app again by running the following command:
python app.pyYour Flask app should now be displaying the Bootstrap-styled welcome message on http://127.0.0.1:5000/.
Step 3: Customize and enhance your Flask app with Bootstrap
Now that you have successfully integrated Bootstrap into your Flask app, you can start customizing and enhancing your app with Bootstrap components and CSS classes.
You can refer to the Bootstrap documentation (https://getbootstrap.com/docs/4.6/getting-started/introduction/) for a full list of components and classes that you can use to style your app.
For example, you can add a navigation bar to your Flask app by updating the index.html template:
<!DOCTYPE html>
<html>
<head>
<title>Flask Bootstrap App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Flask Bootstrap App</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Welcome to Flask Bootstrap App</h1>
</div>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>You can continue to enhance your Flask app with Bootstrap by adding forms, buttons, modals, and other components as needed.
Conclusion:
In this tutorial, we have learned how to integrate Bootstrap into a Flask application to create a modern and responsive web app. By following these steps, you can easily customize and enhance your Flask app with Bootstrap’s powerful styling and components. Happy coding!
👉 Join my Weekly Python Newsletter, Free: https://thenerdnook.substack.com
—– or show your support for my work with more content —–
💥 20% Lifetime Discount for Premium Readers: https://thenerdnook.substack.com/cba05200
Awesome video thanks for this josh ….🤗🤗 and can you please make full flask tutorial with Api and deploy using new functionality .
Heyy please never stop posting you're the best teacher ever!!
I really appreciate you effort. You are so talent and do things so easily that I find myself motivated to start again. It would be good to see videos on flask file structure, flask security measures, protecting sensitive information and other staffs that are really important to develop a production level application. And more video for flask deployment with managed server and unmanaged/self-hosted like you already made one in the last video of this playlist. I am completely new and again I really appreciate your work.
Thank you man, you did great job, your content is helpful, could you make a video of flask with tailwindcss with admin dashboard..👍👍
Extremely helpful, although I am completely stuck on the bootstrap install chapter. I cannot seem to get Yarn going on my Ubuntu system. Hopefully someone has a tip. Thanks!
Josh rules!!!!!
Really nice video!
Thank you very much for this video. It's incredibly helpful and well-organized, making it easy to delve into Flask+Bootstrap quickly.
Nice stuff, very easy to follow
Amazing video, Josh, thanks for sharing. It's a class for those getting into Flask!
Hi, Josh how you doing? think your are doing great I am very happy to see you again with one more project it can be helpful to learn and grow with you recently started the carrier into IT this can help me a lot . to learn new thing along with you. please do what you are that is helpful for me.
You Nailed it🔥
Agreed. We need more of these! ✌🏼
Thank you man. You are awesome!
need more such videos on flask
Nice, love it from Indonesia