Skip to content

Navs and tabs should look the same with <button> #32945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MickL opened this issue Jan 31, 2021 · 2 comments · Fixed by #32630
Closed

Navs and tabs should look the same with <button> #32945

MickL opened this issue Jan 31, 2021 · 2 comments · Fixed by #32630

Comments

@MickL
Copy link

MickL commented Jan 31, 2021

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

@MickL MickL added the feature label Jan 31, 2021
@MickL MickL changed the title Navs and tabs should look the same with buttons Navs and tabs should look the same with <button> Jan 31, 2021
@harshad71
Copy link

can you suggest me to work on it?

@ffoodd
Copy link
Member

ffoodd commented Feb 8, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants