Twitter Bootstrap Question posted in

How to align navbar links to the right-Twitter bootstrap

I am creating a landing page for a homework. One of the requirements is to have a navbar with at least 3 buttons. I did it, but the nav-links don’t to align on the right of the viewport.

I tried many css properties to align them on the such as float, position. Bootstrap class mr-right but nothing seems to work.

https://codepen.io/HacNass/pen/ZgLqLV

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<header id="header">
  <div class="nav-bar">
    <nav class="navbar navbar-expand" style="background-color: #F05204">
      <div id="logo">
        <a href="#">
          <img src="https://media.glassdoor.com/sqll/807564/enhancesys-innovation-solutions-pvt-ltd-squarelogo-1449759499797.png" alt="">
        </a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li id="1" class="nav-item active">
            <a href="#presentation" class="nav-link">Home</a>
          </li>
          <li id="2" class="nav-item active">
            <a href="#" class="nav-link">Our Product</a>
          </li>
          <li id="3" class="nav-item active">
            <a href="#" class="nav-link">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>
<div class="container">
  <div class="presentation">
    <h2 class="h2">
      Sales Network Operations Center (S-NOC)
    </h2>
    <p class="h5 text-muted">
      Automated Transparency
    </p>
    <p id="description">
      Wish to have visibility and control over your Extensive Sales and Distribution network? Develop a highly efficient and automated sales and distribution channel by ensuring proper stock management across the network.
    </p>
  </div>
  <div id="prod-video">
    <p>To know more about our product, please check-out the vide</p>
    <iframe src="https://www.youtube.com/embed/R6zd9ZRd0nU?showinfo=0&rel=0" width="600" height="400" frameborder="0"></iframe>
  </div>
  <div class="form-container">
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input type="email" name="email" placeholder="Enter your email here..." required>
      <input class="btn-primary" id="submit" type="button" value="Submit">
    </form>
  </div>
</div>
Tags:

5

Answers


  1. 0 
    .navbar-nav{
    justify-content: flex-end;
    width: 100%;
}
    Login or Signup to reply.
  2. 0

    At this line:

    <ul class="navbar-nav mr-auto">

    Change mr-auto to ml-auto

    Login or Signup to reply.
  3. 0

    please try these steps..

    css

    .navbar-nav {
    width: 100%;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}
    Login or Signup to reply.
  4. 0

    This is happening due to you are using all library classes and assign them for links, so when you are going to apply new changes by custom class it doesn’t work.

    Try applying custom class and make sure you have not used class from library for child class of that tag

    Login or Signup to reply.
  5. 0

    change mr-auto to ml-auto
    When you want the navbar-nav to push to the right you should use ml-auto.

    If you want to add some space to the right of navbar-nav you can add mr-md-5

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search