Using semantic HTML - "nav"

Question

I was able to create navigation menus using div.

I now need to create a responsive navigation bar using nav and bootstrap grid. Just a simple navbar with 4 horizontal links centered.

Question: After 12 or so hours searching and reading so many sites, I just cannot find examples of such a basic navigation bar. Is it just that people do not use <nav> and always use <div> instead?

It is just getting really confusing at this point and I'm feeling stupid as I thought there would be so many examples online. Can anybody clarify please?

Thanks!!

Answer 1

Updated

I did not see the original need for bootstrap grid. Here is another example that utilizes it and uses markup from the bootstrap official site: https://codepen.io/anon/pen/qYjOgv

HTML

<header>
    <nav class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="w-100"></div>
        <div class="col">col</div>
        <div class="col">col</div>
      </nav>
</header>

CSS

header {
  background: dodgerblue;
  padding: 30px;
}

.col {
  text-align: center;
}

---

Original

This is a very simple base that uses flexbox. Pen: https://codepen.io/anon/pen/odwjMO

HTML

<header>
  <nav>
    <a>Link 1</a>
    <a>Link 2</a>
    <a>Link 3</a>
    <a>Link 4</a>
  </nav>
</header>

CSS

header {
  background: dodgerblue;
  padding: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}