CODEWITHSUNDEEP
htmlcssreactjsreact-bootstrap
jdog
jdog

Reputation: 10759

Why are the buttons shifted left?

Falling a Udemy tutorial on Node, React, Express.

He is using a Header and his code shifts the Login and Cart links to the far right. I have the same code as he does, but my links are not shifted to the far right. I am using the React-bootstrap per the tutorial. My code is the same?

enter image description here

<header>
  <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
    <Container>
      <Navbar.Brand href='/'>BShop</Navbar.Brand>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />
      <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='ml-auto'>
          <Nav.Link href='/cart'>
            <i className='fas fa-shopping-cart'></i>Cart
          </Nav.Link>
          <Nav.Link href='/login'>
            <i className='fas fa-user'></i>Login
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</header>

Upvotes: 3

Views: 57

Answers (1)

Badal Saibo
Badal Saibo

Reputation: 3665

Maybe you are using the latest bootstrap v5, which changed their ml and mr util classes to ms and me.

In, v5, left and right utils has been changed to start(s) and end(e)[1]. So, try replacing ml-auto to ms-auto.

Reference:

  1. https://getbootstrap.com/docs/5.0/migration/#utilities

Upvotes: 2

Related Questions