Bootstrap is a CSS framework that supplies attractive, consistent, responsive styling and interface components, reducing custom CSS so application development can stay focused on Python and design. section 7.2 section 7.11
Bootstrap supports practical web-application work by providing:
- Responsive layouts that adapt presentation across browsers, operating systems, and device sizes. section 7.2 section 7.5
- Reusable classes for cards, spacing, navigation bars, active links, and other interface styling. section 7.2.1 section 7.5.2
- A recognizable visual baseline that remains customizable through additional CSS. section 7.2
Migrating MyBlog
Replace a Flask application's hand-coded CSS without changing its Python behavior: load Bootstrap 5 from jsDelivr in base.html, apply Bootstrap classes to inherited templates, retain limited banner overrides in base.css, and use a media query to hide the banner on smaller screens. A sitewide navbar then provides responsive navigation and highlights the active page through Jinja2. section 7.2.1 section 7.5 section 7.5.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyBlog</title>
{% block styles %}
<style> #1
:root { #1
--background-url: url({{url_for("static", #1
filename= "images/myblog_banner_50.png")}}); #1
} #1
</style> #1
<link #2
rel="stylesheet" #2
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/ #2
dist/css/bootstrap.min.css" integrity="sha384- #2
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd #2
3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> #2
<link #2
rel="stylesheet" #2
href="https://cdn.jsdelivr.net/npm/ #2
bootstrap-icons@1.8.1/font/ #2
bootstrap-icons.css" #2
> #2
<link
rel="stylesheet"
type="text/css"
href="{{ url_for(
'static',
filename='css/base.css'
) }}"/
>
{% endblock styles %}
</head>
<body class="d-flex flex-column h-100"> #3
<div class="banner card"> #3
<div class="card-body"> #3
<div class="col-md-4 offset-md-1"> #3
<h2 class="card-title fw-bold"> #3
MyBlog Home Page #3
</h2> #3
<p class="card-text"> #3
Just a blog to call my own #3
</p> #3
</div> #3
</div> #3
</div> #3
<main class="flex-shrink-0"> #4
{% block content %}{% endblock %}
</main>
<footer
class="footer fixed-bottom py-1 bg-light"
> #5
<div class="container text-center">
<span class="text-muted">
© Copyright 2021 / MyBlog
</span>
</div>
</footer>
{% block scripts %}
<script
src="{{ url_for(
'static',
filename='js/bootstrap.bundle.min.js'
) }}">
</script> #6
{% endblock %}
</body>
</html>
Inspect the base template pattern that loads Bootstrap 5 from a CDN and makes the framework available to inherited pages. section 7.2.1
