Add Bootstrap

Now, it's time to inject some Bootstrap magic into our project. We've successfully wrapped up the Flask part, and our full-fledged CRUD application is ready to shine.

Let's go to the getbootstrap.com website and let’s go to the introduction. This is where we can get the code to get started. Bootstrap is just a collection of CSS, JavaScript, and HTML files that allow us to plug and play things so easily that we'll make it look nicer. So we don't have to code everything from scratch. Just like building blocks, like Lego, it's very useful for speeding things up. So, let's go through QuickStart here. Our first task is to grab some stylesheets and JavaScript links.

So, here comes the exciting part - some CSS and JavaScript magic! Once we have these in place, our project will be all set to shine.

Start by copying the CSS and pasting it into our base.html. Why the base.html? Well, because we want these styles to grace every web page in our project, and since everything takes its cues from base.html. We can get rid of another stylesheet; we don't need it. Time to head back to our website, hit refresh, and voila! You'll see all the fonts have received a chic Bootstrap makeover.

Now, let's not forget about JavaScript. Grab that second link, return to base.html, and it instructs us to paste it at the bottom of the body tag. This isn't going to trigger any major fireworks, just a dash of JS magic.

And there's one final step. We want to give our base.html a bit of extra formatting flair. Within the body, simply wrap it all up in a <div> container. We'll christen it with the special Bootstrap class, container.

Bootstrap introduces a nifty class called container in its CSS, and it's like a quick ticket to better formatting. You'll get handy features like padding and margins without the headache of coding them from scratch.

When we hit that refresh button on our pages, the magic unfolds. Everything gracefully centers itself, and when you resize the window, there's that handy margin at the edges. Even in mobile view, Bootstrap has our back. No weird clipping issues or strange quirks to worry about. So, voila! We've just given our FrontEnd a much-needed facelift, but we're not stopping here. Thanks to Bootstrap, things are already looking better. Let's keep the momentum going.