In previous post, we use Jinja2 to generate html content. However, the default html style is ugly. Today we will use Bootstrap 4 framework to make it look better.

  • Bootstrap is a free popular front-end (html, css, js) framework.
  • Bootstrap helps you create responsive designs.
  • Bootstrap is open-source. You can customize the default theme to create your own.

Read More


Create a new css folder to store all css files. The static folder will have below structure


Create style.css file under /static/css/ with below content.

/* Custom page CSS
-------------------------------------------------- */

body > .container {
  padding: 60px 15px 0;


Add static folder path to app handlers.

runtime: python27
api_version: 1
threadsafe: yes

- name: jinja2
  version: latest

- url: /favicon\.ico
  static_files: static/images/favicon.ico
  upload: static/images/favicon\.ico
- url: /static
  static_dir: static
- url: /.*


  • There are many ways to add Bootstrap to your project. Today we will use the most easy and quickest way: include BootstrapCDN link in your project.
  • Add our custom style.css
  • Update page with Boostrap navbar component.
<!DOCTYPE html>
<html lang="en">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="/static/css/style.css" rel="stylesheet">
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#">TelegramBot</a>
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About</a>
    <main role="main" class="container">
     	<h1 class="mt-5">{{ myContent }}</h1>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


Home Page