Conversation
- navbar hamburger button - add btn-icon class - align content at bottom of cards - use a valid background color for albums (main content)
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Updates the Album example markup to align with Bootstrap v6 utility/class changes and adjusts spacing/layout to improve visual alignment.
Changes:
- Updates navbar toggler and background utility classes for v6.
- Tweaks CTA button spacing in the header.
- Adds
w-100to card action rows to influence layout width.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <a href="#" class="btn-solid theme-primary m-2">Main call to action</a> | ||
| <a href="#" class="btn-solid theme-secondary m-2">Secondary action</a> |
There was a problem hiding this comment.
Using m-2 adds horizontal margin on both sides of each button, which can create unintended outer spacing (e.g., extra left margin before the first button and extra right margin after the last). If the goal is just spacing between the buttons, prefer using directional spacing (e.g., me-2 on the first button while keeping my-2 for vertical rhythm) or apply a parent gap-* with a flex wrapper so only inter-button spacing is affected.
There was a problem hiding this comment.
this was an intentional change on my part. I thought the buttons were too close before... I can revert it though if requested.
| <div class="card-body"> | ||
| <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> | ||
| <div class="d-flex justify-content-between align-items-center"> | ||
| <div class="d-flex justify-content-between align-items-center w-100"> |
There was a problem hiding this comment.
w-100 is likely redundant here because a div is block-level by default and will typically already span the available width. If there isn't a specific shrink-to-fit scenario being addressed, removing w-100 would reduce noise in the example and keep the markup closer to the minimal pattern.
There was a problem hiding this comment.
this change was intentional, the div was not full-width of the containing card before.... see
https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/examples/album/
Type of changes
Checklist
npm run lint)Live previews
previous for reference: