[SOLVED] How to make my navbar float and also separate the list with Bootstrap 4

How to make my navbar float and also separate the list with Bootstrap 4

I am trying to make my navbar float to the right and also separate the list in the navbar. I am finding it difficult after several attempts. Attached is my sample code I have been working on. i want to create something like this

$def with (page)
$var css: static/css/bootstrap.min.css static/css/bootstrap-material-design.scss
$var js: static/js/bootstrap.min.js static/js/bootstrapMaterialDesign.js static/js/jquery-3.4.1.min.js static/js/ripples.js static/js/scripty.js


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEARENA</title>

    $if self.css:
        $for style in self.css.split():
            <link rel="stylesheet" href="$style" />
</head>
<body>
    <div id="app">
            <div class="navbar navbar-info navbar-fixed-top bg-light">
                <div class="nav navbar-header ">
                    <a class="navbar-brand">DeArena</a>
                </div>

                <ul class="nav navbar-nav" >
                    <li><a class="waves-effect" href="/"> Home Feed<div class="ripples-container"></div></a></li>
                    <li><a href="/trending">Trending<div class="ripples-container"></div></a></li>
                    <li><a href="/profile">Profile<div class="ripples-container"></div></a></li>
                    <li><a href="/settings">Settings<div class="ripples-container"></div></a></li>
                </ul>

                <div class="pull-right">
                    <a href="/register"class="container btn btn-raised btn-default waves-effect">Register</a>&nbsp;&nbsp;
                </div>
            </div>
        <br /><br /><br />

        $:page
    </div>

    $if self.js:
        $for script in self.js.split():
            <script scr="$script"></script>


</body>
</html>

Solution

Try this code bootstrap 4 version 4.4.1 and change the text according to your need.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
  <a class="navbar-brand" href="">Logo</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-success my-2 my-sm-0" type="button">Search</button>
    </form>
  </div>
</nav>