Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Building a Navbar

Posted by Kirt Perez
Kirt Perez
7,374 Points

Margin right class is not applying

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container container-fluid">
      <a class="navbar-brand order-1 mr-0" href="https://www.teamtreehouse.com" target='_blank'>Presented by Treehouse</a>

mr-0 should get rid of the margin but the class is not applying to the webpage, why? Going into the developer tools and taking off margins manually changes the margin value but the class is not being read.

2 Answers

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Thanks Kirt,

I think I've found what the issue is. The course is going over Bootstrap 4 (which was the latest version at the time of filming), but you're linking Boostrap 5 to your code. In Bootstrap 5 the mr has been changed to me. So if you change your class for the anchor element to me-0 instead of mr-0 you should end up with the results you're looking for.

I've included a link below to the Documentation that goes over the change.

https://getbootstrap.com/docs/5.0/migration/

Kirt Perez
Kirt Perez
7,374 Points

Appreciate the fast response! This makes total sense. So basically left and right is replaced with start and end with Bootstrap 5. Thanks.

Kirt Perez
Kirt Perez
7,374 Points
Kirt Perez
Kirt Perez
7,374 Points

Brandon White

https://w.trhou.se/9dwc6o66vh

The "Presented by Treehouse" text has a margin right to it that isn't being overwritten with the instructions from the video for me.