Menu
I am looking to integrate a bootstrap template into my flask program. Specifically: I downloaded the zip file for this template:
https://startbootstrap.com/template-overviews/sb-admin/
However, the file is in a completely different format from the Flask template/static format.
I also downloaded Flask-Bootstrap (python) but have not been able to successfully import the template accurately.
I am looking for advice on how to easily import this type of template into my flask code (including css, jQuery, html, etc.). Thanks!
870
Flask-Bootstrap packages Bootstrap into an extension that mostly consists of a blueprint named 'bootstrap'. It can also create links to serve Bootstrap from a CDN.
When programming in Python, you would typically use a web framework, one very common one is Django. Fortunately, there is a project for using Bootstrap in Django. This is on Pypi.org so installing is the regular routine. Most likely you are running a virtual environment, activate it and install with pip.
Flask is intended for getting started very quickly and was developed with best intentions in mind. Bootstrap belongs to "Front-End Frameworks" category of the tech stack, while Flask can be primarily classified under "Microframeworks (Backend)".
You need to create templates and static folders in your project folder, put all .html files in templates folder and all other files (CSS, JS, JPG, etc) in static folder and then in your html file use url_for to load the static files, instead of the default HTML way.
This is a sample project structure:
-project
app.py
- templates
index.html
-static
-css
style.css
-js
example.js
-img
example.jpg
The answer by @mohammad-amin is useful for the directory structuring, but I needed an example of how to use url_for within HTML. With his example structure and files, you can load style.css like this:
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
</body>
</html>
You can install Flask's Bootstrap dependency with pip install flask-bootstrap in your terminal. However, using flask-bootstrap can limit the control you have over the styling and design of your website.
It also has documentation here, and for the documentation specific to flask-bootstrap, go here.
Flask Bootstrap works well with flask-wtf and navbars. I am currently looking for a way to make pages styled with flask-bootstrap responsive, as it is not very easy to implement in my experience.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
