Docs: Modernize footer design and improve visual hierarchy #40969
Conversation
There was a problem hiding this comment.
Thanks for creating the PR, @SuhaniBh!
There are a few code issues that need addressing, but let's hold off on fixing them until we hear back from @mdo (who designs Bootstrap) about the design. We don't want to spend time on code adjustments if the rendering doesn't meet the design expectations.
On a personal note, though I'm not a designer, I find the light version a bit too colorful. I also think the logo and 'Bootstrap' text shouldn't be blue.
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
This page can't use <style>, the CSS part should be put inside the corresponding (S)CSS file.
| <li class="mb-3"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Discussions</a></li> | ||
| <li class="mb-3"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Corporate sponsors</a></li> | ||
| <li class="mb-3"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Open Collective</a></li> | ||
| <li class="mb-3"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener" class="text-decoration-none text-body-secondary hover-primary">Stack Overflow</a></li> |
There was a problem hiding this comment.
For the links style, it should be handled in the corresponding (S)CSS file, not by repeating classes all over the file.
| <footer class="bd-footer py-5 mt-5 bg-primary-subtle"> | ||
| <div class="container py-5 px-4 px-md-3"> | ||
| <div class="row g-4"> | ||
| <!-- Brand Column --> |
There was a problem hiding this comment.
The comments added in this PR can be removed.
Description
The current Bootstrap footer design, while functional, can benefit from modern design principles to enhance visual appeal and user experience. This PR modernizes the footer with improved spacing, typography, and visual hierarchy while maintaining its core functionality.
Motivation & Context
This change improves the visual presentation of Bootstrap's documentation footer by:
Type of changes
Checklist
Live previews
Related issues