In this project, I use bootstrap, which was originally developed by Twitter, to make the existing webpage looks more professional.
Output Example:
– Previously, the webpage looks like this.
– With bootstrap base template, it becomes like this,
Here is the code changes I made:
– I used flask-bootstrap module to use this framework
from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app)
– And added navigation bar so that the user can navigate them through the page easily.
{% extends 'bootstrap/base.html' %} {% block title %} {% if title %} {{ title }} - Webtest {% else %} Welcome to Webtest {% endif %} {% endblock %} {% block navbar %} <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{ url_for('index') }}">webtest</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="{{ url_for('index') }}">Home</a></li> <li><a href="{{ url_for('gen_gtrends_wordcloud') }}">GoogleTrends</a></li> </ul> </div> </div> </nav> {% endblock %} {% block content %} <div class="container"> {% with messages = get_flashed_messages() %} {% if messages %} <ul> {% for message in messages %} <li>{{ message }}</li> {% endfor %} </ul> {% endif %} {% endwith %} {% block app_content %} {% endblock %} </div> {% endblock %}