how can i make the navbar items invisible in bootstrap 5 until screen reaches a certain width?

Question

I am making a navbar using bootstrap 5 and want to make the navbar items invisible until the screen size is below a certain width.

Answer 1

Use media queries in css.

div {
  display: none;
  background: red;
}
@media screen and (max-width: 700px) {
  div {
    display: block;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div>
    You cant see me on big screens
</div>

Sample fiddle.

Answer 2

You can look at the first navbar's html on this page of Bootstrap v5.0, for an in detail example. Basically you would be required to add a class navbar-expand-lg (you can use any size acronym of bootstrap in place of lg) to your nav. And put all your navbar items in a div with classes collapse navbar-collapse.