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?

Works as it should for me. (Using IE mobile) – Klooven Nov 21 '17 at 20:28 — Klooven, Nov 21 '17 at 20:28

score 0 · Accepted Answer · answered Nov 26 '17 at 16:03

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>

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

1 Answers1