Bootstrap's navbar is a powerful, responsive component to provide sensible navigation around a website. Before getting into the details, let's add the navbar to the top of our page (right below the body tag) and see what happens:
<nav class="navbar navbar-expand navbar-light"> <a class="navbar-brand" href="#">MyPhoto</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#welcome"> Welcome</a> </li> <li class="nav-item"><a class="nav-link" href="#services"> Services</a></li> <li class="nav-item"><a class="nav-link" href="#gallery"> Gallery</a></li> <li class="nav-item"><a class="nav-link" href="#about"> About</a></li> <li class="nav-item"><a class="nav-link" href="#contact"> ...