Buttons

Alright, let's shift our focus to the Recipes page. It's good, but it has the potential to be even better, don't you think? So, we're going to give this Recipes page a more polished and stylish appearance. Our loop generates each post, and it's right down here. Now, here's the fun part: we're going to make some changes. We'll swap out those <h3> tags with <small> tags to display author information.

Refresh and see. It looks a lot nicer. And let's fix the spacing. We can probably use break tags here. <br>.

Now, let's talk about buttons. Just give it a quick Google search: 'bootstrap buttons.' You'll find a treasure trove of stylish button options that can replace these plain blue ones with lines. All you need to do is inherit a class and specify the style you want. That means we can have a whole array of different colors. For instance, if you label something as danger, it'll turn into a bold red button. And if it's primary, it'll be a cool, crisp blue.

Let's dive into our code and head over to the buttons section. It's as simple as adding a class; Bootstrap takes care of the rest. For example, we want our Delete button to stand out in red, so we just specify btn and btn-danger as its classes. Similarly, for our Edit button, we can make it look cool and blue by inheriting the classes btn and btn-primary down here.

Now, let's head back to our website and hit that refresh button. Voila! The buttons have received a stylish makeover. The best part? They still perform the same functions flawlessly. Click Edit, and you'll find yourself back on our recipe edit page.