7. Make the landing page fancy with Bootstrap
Bootstrap is a CSS framework that makes front end development easier than ever. To add Bootstrap to your app, an easy way is to copy the following into a new iris/templates/base.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-8">
<h1 class="mt-2">Iris Model Predictions</h1>
<hr class="mt-0 mb-4">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
Update iris/templates/home.html to the following:
{% extends 'base.html' %}
{% block content %}
<h1>it works!</h1>
{% endblock %}
Your landing page should look like this after doing python3 manage.py runserver:
