Split Navbar Into 4 Columns

Bootstrap Studio Help
1

I am new to front end dev. Familar with HTML, CSS. What is the easiest way to put | field label | select box | field label | select box | in a top of page navbar? So that the labels are next to their respective select box. I thought maybe I could split the navbar into a row of 4 columns but that is not immediately obvious how to do that in Bootstrap Studio. Thanks

2

I think the reason you haven’t gotten any answers on this is because your question is not very clear in regards to the | field label | select box | field label | select box | description. Personally, I cannot envision what it is you’re trying to create here, but it doesn’t seem like a typical navigation menu. Can you possibly post an image of what you are trying to do? Or is this something you’ve seen on another website that you might be able to post a link to?

3

You can do it like this

<nav class="navbar navbar-expand-md bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1">
      <span class="visually-hidden">Toggle navigation</span>
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navcol-1">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item d-flex justify-content-center align-items-center">
          <div class="input-group">
            <span class="input-group-text">Select1 Label</span>
            <select class="form-select">
              <option value="12">This is item 1</option>
              <option value="13">This is item 2</option>
              <option value="14">This is item 3</option>
            </select>
          </div>
          <div class="input-group">
            <span class="input-group-text ms-1">Select2 Label</span>
            <select class="form-select">
              <option value="12">This is item 1</option>
              <option value="13">This is item 2</option>
              <option value="14">This is item 3</option>
            </select>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
4

Dunno how you grok the things you do?! :face_with_spiral_eyes: