Another post introduces Noter - an ASP.NET Core MVC app for managing notes. The app provides basic functionality: viewing, editing, and creating notes, as well as navigating between pages. The problem is its UI elements are unstyled, making the interface visually unappealing.

This post applies Bootstrap 5.3 styling to Noter and showcases the differences between before and after.

Access the project’s source code on GitHub 📁, check the initial state 0️⃣, explore the pull request ➡️, and view the final state 1️⃣.

Colours

The first commit introduces colours: dark theme + header in primary colour.

Table

The second commit styles the table. It is now striped and has a white line between its head and body.

Pagination

The third commit improves the pagination buttons. Inactive buttons are now disabled rather than disappearing. Extra buttons to reach the first and last pages are also added.

Buttons

The fourth commit styles the rest of the buttons using primary, secondary, and success colours, as well as adding spacing and button grouping.

Forms

The fifth commit styles the forms by adding spacing, labels, and using danger colour for the validation messages.

Conclusion

With Bootstrap styling applied, the user interface reaches a passable level. Noter is now ready for improvements in other areas.