CSS

We can add a bit more style to the page. For that we’ll use some CSS. In the same way that a web framework like Flask makes creating web applications easier, using a CSS framework makes applying CSS styles to your HTML easier.

In this case we’ll add Bootstrap to our talks list. We’ll add the link tag to the top of our file. We’ll also add a class attribute to our link element with some class names defined by Bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<a href="{{ url_for('talk') }}" class="btn btn-lg btn-primary">Create New Talk</a>

<h1>My Talks</h1>

{% for talk in talks %}
  <h2>{{ talk.id }}</h2>
  <p>{{ talk.title }}</p>
  <small>submitted on {{ talk.created_at }}</small>
{% endfor %}

There’s a lot more you can do to make the page prettier with CSS, but we hope you see how quickly you can change the look of your pages with a CSS framework and some simple classes.