Página Virada
Portuguese for “Page Turned”
A landing page for a fictional book club in Belo Horizonte, Brazil, built from scratch with Bootstrap 5 to learn the framework hands-on: from the responsive grid to publishing on GitHub Pages.
- Role
- Design, code and deployment
- Technologies
- Bootstrap 5 · HTML · CSS · JavaScript
- Type
- Study project · 2026
- Status
- Live ↗
Why a book club
In my postgraduate program in Systems Analysis and Development, I wanted to understand Bootstrap beyond the theory. Instead of copying isolated examples from the docs, I decided to build a complete page from start to finish, around a theme that combines two things I love: books and code.
Página Virada is a fictional book club. The club doesn’t exist, but the page really works: it’s responsive, has JavaScript-generated content and a validated form, and it’s live on the web.
Learning by building something whole
I defined what the page needed in order to cover the essentials of the framework:
- A layout that works on any screen
- Interactive Bootstrap components
- Content generated from data
- A look of its own that doesn’t feel like a template
And finally, putting it all online with Git and GitHub Pages, just like a real project.
What the page does
Responsive grid
A 12-column grid layout that rearranges itself on phones, tablets and desktops.
Dynamic bookshelf
Book cards are generated with JavaScript from a data list, with a genre filter and search.
Components
A navbar that collapses into a mobile menu, a modal, a schedule table and an FAQ accordion.
Validated form
Required fields and email are checked before submitting, with clear error messages.
Bootstrap with personality
One of my goals was for the page not to look like “just another Bootstrap site.” To get there, I overrode the framework’s own variables with my own theme: fonts, colors, buttons and spacing, plus sparkles and doodles that give the page a light touch.
The book covers are drawn with CSS alone, without a single image, which keeps the page light and easy to maintain.
Stack and process
I built the page in stages, testing each part in the browser before moving on to the next and tracking progress with commits.
What I had to solve
One modal for every book
Instead of writing a modal for each book, I created a single modal that fills in with the data of the book that was clicked, using Bootstrap events and JavaScript’s find().
The CSS that wouldn’t load
After customizing the theme, the page still looked like the default. Instead of rewriting everything, I investigated step by step: I checked whether the file was being loaded, reviewed the folder structure and the errors in the browser Console, until the theme showed up. That’s where I learned to debug methodically.
The page scrolling sideways on phones
The grid’s wide gutters were overflowing small screens. I adjusted the spacing by screen size: smaller on phones, larger on desktop.
What this project shows
Responsive front-end
Layouts with container, row and col that work from phone to desktop.
Hands-on JavaScript
HTML generated from data, filters, search and events.
Design and identity
Customizing the framework to create a page with a personality of its own.
Git and deployment
Version control with commits and a site published on GitHub Pages.
“Every page turned is one more step in code.”
Página Virada was my first complete Bootstrap project: from the first line of HTML to a live site.