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

css/style.css

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

static/
    css/
    images/

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

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

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

app.yaml

Add static folder path to app handlers.

runtime: python27
api_version: 1
threadsafe: yes

libraries:
- name: jinja2
  version: latest

handlers:
- url: /favicon\.ico
  static_files: static/images/favicon.ico
  upload: static/images/favicon\.ico
- url: /static
  static_dir: static
- url: /.*
  script: main.app

base.html

  • 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">
<head>
    <title></title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
    <header>
        <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>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About</a>
                </li>
            </ul>
        </nav>
    </header>
    <main role="main" class="container">
     	<h1 class="mt-5">{{ myContent }}</h1>
    </main>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

Result

Home Page