Navs and tabs should look the same with <button>

[MickL]

Elements like navs and tabs are mostly used with <a> in the docs. Anyhow modern JavaScript apps (e.g. using React or Angular) often do not use <a> elements to trigger internal ui events.

IMO It should be possible to use this elements CSS with buttons, too and they should look the same:

<ul class="nav">
  <li class="nav-item">
    <button class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <button class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <button class="nav-link">Link</a>
  </li>
</ul>

Currently using components like .nav with buttons will totally break the layout.

This may affect the CSS only and must not apply to Bootstrap's Javascript.

Target version: 4.x / 5.x

[harshad71]

can you suggest me to work on it?

[ffoodd]

Hi there,

FYI this in already in progress with #32630. At least this PR gets rid of border and background for buttons, which makes them look the same than links.

@MickL If that doesn't match your request, feel free to elaborate a bit more and provide a reduced test case.