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!

@BlackDracoSLC

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.

    `

REF:
Bootstrap Navbar
http://getbootstrap.com/components/#navbar

Bootstrap Accessibility
http://getbootstrap.com/getting-started/#accessibility

1 Like

Thank you for the suggestions and reference links!