How to Add Bootstrap Styles in Flask Application

Flask Tutorial

About Lesson

In this Flask lesson we are going to learn How to Add Bootstrap Styles in Flask Application, there are three different ways that you can add Bootstrap in Flask Application, you can download the bootstrap files and add those files in your static folder of Flask project, you can install Flask-Bootstrap library or you can use CDN links, we are going to use CDN links.

Open your base.html, we are going to add our Bootstrap CDN links in here, also we are going to create a simple bootstrap navbar in our base.html.

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet" >
</head>
<body>

 <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">GeeksCoders</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact">Contact</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="about">About</a>
        </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search"
               placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


{% block body %}

{% endblock %}

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" >

</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{% block title %}{% endblock %}</title>

rel="stylesheet" >

</head>

<body>

<a class="navbar-brand" href="/">GeeksCoders</a>

</li>

<a class="nav-link" href="contact">Contact</a>

</li>

<a class="nav-link" href="about">About</a>

</li>

</ul>

<input class="form-control me-2" type="search"

placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

{% block body %}

{% endblock %}

</script>

</body>

</html>

templates/index.html

{% extends 'base.html' %}

{% block title %}Home{% endblock %}



{% block body %}

<div class="container">
 <h1>Home Page - Template Inheritance</h1>

<h3>Welcome to . {{data}}</h3>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block body %}

<h1>Home Page - Template Inheritance</h1>

<h3>Welcome to . {{data}}</h3>

</div>

{% endblock %}

templates/about.html

{% extends 'base.html' %}

{% block title %}About{% endblock %}



{% block body %}

<div class="container">
 <h1>This is our about page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}About{% endblock %}

{% block body %}

<h1>This is our about page</h1>

</div>

{% endblock %}

templates/contact.html

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}



{% block body %}

<div class="container">
 <h1>This is contact page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}

{% block body %}

<h1>This is contact page</h1>

</div>

{% endblock %}

This is our app.py file.

from flask import Flask, render_template


#create the object of Flask
app  = Flask(__name__)


#creating our routes
@app.route('/')
def Index():
    name = 'Geekscoders.com'
    return render_template('index.html', data = name)



@app.route('/contact')
def Contact():
    return render_template('contact.html')



@app.route('/about')
def About():
    return render_template('about.html')




#run flask app
if __name__ == "__main__":
    app.run(debug=True)

from flask import Flask, render_template

#create the object of Flask

app = Flask(__name__)

#creating our routes

@app.route('/')

def Index():

name = 'Geekscoders.com'

return render_template('index.html', data = name)

@app.route('/contact')

def Contact():

return render_template('contact.html')

@app.route('/about')

def About():

return render_template('about.html')

#run flask app

if __name__ == "__main__":

app.run(debug=True)

Run your flask application and go to http://localhost:5000/, this is the result.

How to Add Bootstrap Styles in Flask Application