Bootstrap for Blazor: Styling the Task Tracker

This is the concluding piece of a series that created a Blazor app, specifically a Task Tracker. The application had been built, refined, made interactive, and functioned from Part 4, but it had a plain, unstyled appearance because it relied solely on default HTML elements. The final post incorporates Bootstrap directly into the app, without making any alterations to the underlying logic, purely for visual enhancement, thereby concluding the series with a presentable application.

Bootstrap is essentially a CSS framework that offers a vast array of pre-written CSS classes covering layout, spacing, colors, and common UI components, including buttons, cards, navigation bars. These classes enable a webpage to look professionally designed without the need to write custom CSS from scratch. Think of Bootstrap's classes as pre-fabricated furniture, rather than building everything from raw materials.

The classes are akin to a specific bookshelf or desk, already proportioned and finished correctly. The user still arranges the room themselves, determining the layout of the page, but they are not manually cutting and sanding every piece of wood.

To integrate Bootstrap into the project, the main HTML host page (index.html for Blazor WebAssembly, or _Layout.cshtml/App.razor's host page for Blazor Server) includes a link to the Bootstrap CSS file. This single line makes every Bootstrap class used throughout the application instantly available across the entire Blazor app.

The layout of the app follows Bootstrap's grid system, based on a 12-column grid. A row contains one or more columns, with the column widths (e.g., col-md-8, col-md-4) adding up to 12 for a clean, full-width layout. The HTML structure includes a div classed as "row," with two child divs, one with class "col-md-8" for the main content and the other with class "col-md-4" for the sidebar, adding up to 12 columns.

Cards are implemented using Bootstrap's card classes to provide a bordered, padded container with a consistent visual style, transforming a bare list into a more readable UI element. Each card consists of a card body containing a task description and a delete button, with the card body containing a checkbox to indicate task completion.

Button variants are utilized to replace plain, unstyled buttons. Three buttons are created with different Bootstrap classes: btn-primary for the "Add Task" button, indicating a primary, prominent action; btn-outline-danger for the "Delete" button, representing a destructive action with a red outline; and btn-outline-secondary for the "All" filter button, providing a neutral, low-emphasis style.

A navbar is added to give the app an actual header. The navbar is styled with Bootstrap's navbar-dark and bg-dark classes, automatically adjusting color contrast without manual color picking.

Finally, the application displays a list of tasks, each wrapped in a card. The cards are styled using Bootstrap's utility classes to add margin between cards and align elements within the card body, such as the task description and the delete button. The app's functionality remains unchanged from Part 4, with the addition of Bootstrap classes as CSS attributes to the existing markup.