Sign in Subscribe
flask

Flask Bootstrap Templates - Open-Source Starters

A curated list with Bootstrap Templates integrated with Flask Framework - all projects are open-source, available for download without a registration lock.

Editor

• 6 min read
Flask Bootstrap Templates - Open-Source Starters

This article presents a curated list with open-source Flask Bootstrap Templates generated by AppSeed using modern UI Kits from well-known web agencies like Creative-Tim, or Themesberg. All products can be downloaded without a registration lock and used for hobby and commercial products. For newcomers, Flask is a lightweight web framework designed to start a new web project quick and easily. Bootstrap is the most popular CSS framework with more than 150k Github stars and a huge ecosystem behind it.

What is Bootstrap

To make this article really useful, especially for beginners, this section will provide a basic introduction to the Bootstrap framework. First, this amazing software is open-source and free and we can reuse all provided assets at no cost even for commercial projects. How to get started with Bootstrap? Well is quite easy if we have a few free minutes to spare on this subject. Just open a code editor like VsCode, Atom, or even Notepad++, create a new file with this minimal content: 

<!doctype html>
<html lang="en">
  <head>
      <title>My First Bootstrap Page</title>
  </head>
  <body>
  	<h1>Get started with Bootstrap</h1>    	
  </body>    
</html>
Simple HTML Page - No Bootstrap (yet)

Save the file and click on it to render the content in the browser. You should see something like this:

A simple text "Get started with Bootstrap" provided by a simple, unstyled web page.
Simple HTML Page - No Bootstrap Style

Please note that we didn't use any Bootstrap magic yet. Let's update the code to include Bootstrap styling and check out the effects.

<!doctype html>
<html lang="en">
  <head>
      <title>My First Bootstrap Page</title>
      
      <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  	<h1 class="text-primary">
        Get started with Bootstrap
    </h1>     	
    
    <!-- Bootstrap Javascripts -->  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  
  </body>    
</html>
Simple HTML Page - With Bootstrap Styling

This time the page uses Bootstrap CSS plus a minimal JS bundle, unused yet. The page title is styled using text-primary CSS class provided by Bootstrap. Here is the output:

A simple text "Get started with Bootstrap" with blue color provided by a simple web page styled with Bootstrap.
Simple Bootstrap Template.

From this point, we can use all that Bootstrap has to offer:

The Bootstrap team also provides a tested starter equipped with all necessary tools to get Bootstrap up and running super fast using NodeJS tools and GIT command-line tool to download the Bootstrap Starter from the public repository.      

Step #1 - Clone/download the project using GIT

$ git clone https://github.com/twbs/bootstrap-npm-starter
$ cd bootstrap-npm-starter

Step #2 - Install dependencies using NPM or Yarn (optional)

$ npm i
// OR
$ yarn

Step #3 - Start the project with LIVE reload on changes

$ npm run watch
// OR
$ yarn watch

If all goes well, we should see the starter pages by visiting localhost:3000 in the browser:

A simple page styled with Bootstrap provided by the official Bootstrap team.
Bootstrap Starter Template - The HOMEpage

From this point, we should have a minimal idea about Boostrap and we can move forward and say a few words about Flask.

What Is Flask

In one sentence, Flask is an amazing web framework written in Python that comes with a super lightweight codebase compared to his older brother Django. Flask comes by default without a database, authentication, or an admin module and leaves all these features to be added by the developers using an arbitrary code structure. To get started with Flask we need to have Python3 properly installed and accessible in the terminal plus a few minutes to spare to code and start a simple Flask project.

Step #1 - Install Flask using PIP, the official package manager for Python

$ pip install Flask

Step #2 - Create a new file app.py with the following content: 

from flask import Flask 
app = Flask(__name__) 
 
@app.route('/') 
def hello_world(): 
    return 'Hello from Flask!' 
 
if __name__ == '__main__': 
    app.run()

Once we save the file, the next step is to start and visit this simple Flask project in the browser:

Step #3 - Start the app using Python

$ python3 app.py

As an alternative, we can use the embedded web server provided by Flask:

$ # Set up the environment 
$ export FLASK_APP=app.py
$
$ flask run

At this point, we can visit our super-simple Flask project in the browser:  

A simple web page that displayes "Hello World" text with black color provided by a basic Flask project.
Hello World from Flask

The curious minds can start much faster from this point by using a few development-ready open-source starters provided and actively supported by AppSeed. All projects are simple with a clean, modular codebase and might be used for unlimited hobby and commercial projects.  

Flask Template Bootstrap Soft UI

This simple Flask starter is generated on top of Soft UI, a modern Bootstrap 5 design from Creative-Tim. The codebase comes with a database, authentication, and deployment scripts for Docker.

Let's start this nice Bootstrap 5 Template by following the build instructions as provided in the official documentation:

Step #1 - clone the project

$ git clone https://github.com/app-generator/flask-soft-ui-dashboard.git
$ cd flask-soft-ui-dashboard

Step #2 - Install modules

$ pip3 install -r requirements.txt

Step #3 Set up the environment

$ export FLASK_APP=run.py

Step #4 - Start the app

$ flask run
A modern dashboard page with a left menu and many colorful charts and widgets, all provided by Soft UI Dashboard, an open-source Bootstrap Template coded in Flask.
Flask Bootstrap Template - Soft UI Dashboard.

Flask Template Bootstrap Pixel

Open-Source Flask starter coded with basic modules, database, ORM, and deployment scripts on top of Pixel Lite UI Kit, a fully responsive and modern Bootstrap 5 UI Kit that will help you build creative and professional websites.

Flask Bootstrap Template - Pixel Lite Design that presents a vintage image on top and some nice text bellow.
Flask Bootstrap Template - Pixel Lite Design

Flask Soft UI Bootstrap Template

Soft UI Design System is a premium Bootstrap 5 UI Kit designed by Creative-Tim designed for those who like bold elements and beautiful websites. Soft UI Design System Flask is a simple Flask starter provided by AppSeed with a modular codebase, database, authentication, and deployment scripts.

Flask Bootstrap Template - Soft UI Design System.
Flask Bootstrap Template - Soft UI Design System.

Datta Able Flask

Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. Before developing Datta Able our key points were performance and design.

Flask Bootstrap Template - Data Able Design.
Flask Bootstrap Template - Data Able Design.

Flask Template Swipe

Jinja Template project generated by AppSeed on top of a modern UI Kit. The project is a super simple Flask project WITHOUT database, ORM, or any other hard dependency. The project can be used as a codebase for a future project or to migrate the Jinja files and assets to a legacy Python-based project that uses Jinja as a template engine (Flask, Bottle, Django).

Flask Bootstrap Template - Swipe One-page Design.
Flask Bootstrap Template - Swipe One-page Design.
Thansk for reading! For more resources please access: