How to make a `` in Bootstrap look like a normal link in nav-tabs?

Practical methods to disguise a button as a link

Styling the anchor tag as a button

Use the role="button" attribute when your objective is to offer a uniform navigational behavior across forms.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#" role="button">Link-like Button</a>
  </li>
  <!-- ...other tabs... -->
</ul>


Looks like an <a> tag, quacks like a button!

Applying CSS to style your button

We will utilize an additional CSS class btn-anchor for cases when the <button> must remain for semantic or JavaScript-related reasons.

.btn-link.btn-anchor {
  outline: none !important;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background-color: transparent;
  color: inherit; /* I just wanna fit in, guys... */
  text-decoration: underline; /* Tryna look normal here, okay? */
}

.btn-link.btn-anchor:hover,
.btn-link.btn-anchor:focus {
  text-decoration: none; /* Ha, fooled ya! */
}


Now, let's add this to your <button>. It's kind of like giving your <button> a tie and glasses, nobody will know it's still a <button>.

<button class="btn btn-link btn-anchor">Surprise, I'm just a button!</button>


Transforming buttons: In-depth styling techniques

Styling for stealth: Removing border and outline

Let's start by getting rid of outline and border properties to make this <button> blend in with the crowd.

.remove_button_css {
  outline: none;
  border: none;
  box-shadow: none; // "Nothing to see here," says the box-shadow.
}


Synchronized states: matching hover and focus

When you hover or focus on the element, you want it to behave just like any other link.

.remove_button_css:hover,
.remove_button_css:focus {
  color: #0056b3; // Because who wouldn't like a tad-blue-on-hover?
  text-decoration: underline; // Ain't nothing more linky than an underline!
}


Color change operation

Change the color attribute to make it fit your Bootstrap 3 or Bootstrap 4 theme - they really can't tell the difference!

.remove_button_css {
  color: #337ab7; /* Who doesn't love a calm blue link? */
}


Accessibility: Remaining interactive

Don't forget to include href="#" on <a> tags styled as buttons to maintain accessibility.