Issue with Bootstrap columns on webpage resizing

Hello, all! I’m just getting started at FCC but am having fun so far. I just completed the Profile Page assignment and had some questions on getting the best looking website across several screen sizes.

Two main issues I see:

The nav bar section doesn’t seem to resize very well when the width gets smaller. What can I do to get the nav bar to stack horizontally when the width shrinks?

The Bootstrap columns seem to get all muddled together on smaller widths as well. Did I set up the rows incorrectly?

Did I set up the Bootstrap rows correctly but mess things up with the margin settings in my CSS?

Thank you in advance for any feedback!


Here are some suggestions.

  1. To fix the Navbar, review Bootstrap navbar usage.

  2. For the bottom webpage links, switch to using a list instead.


Bootstrap Navbar

Bootstrap Accessibility

1 Like

Thank you for the suggestions and reference links!