Bootstrap 4 to have navbar items allways expanded on small screen with no button

Question

I am working on a website footer, and am looking for a way to make a nav that has all it's items in one row on a large screen, and collapsed to many rows on a smaller screen. The collapsing happens just fine, but I cannot figure out a way to:

a) automatically show the rows and not have them hidden until the toggle button is hit

b) eliminate the toggle button all together

My current code:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav> 

Currently, this just collapses into nothing without a button (obviously because I have removed it). Is there an easy way to make it default to expanded on smaller screens?

Answer 1

Figured it out...

Needed the "show" class applied to the collapse (the div with id navbarColor03 ).

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse show" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav>