CSS

OK, we’ve made our poems actually look like a poem now. Next 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 poems 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('poem') }}" class="btn btn-lg btn-primary">Create New Poem</a>

<h1>My Poems</h1>

{% for poem in poems %}
  <h2>{{ poem.id }}</h2>
  <p>{{ poem.body.replace('\n', '<br>') | safe }}</p>
  <small>created at {{ poem.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.