Btn and btn-default classes outline issue

HTML-CSS
1

So, I have just started learning bootstrap from FreeCodeCamp and I just learned about btn and btn-default classes.
I created a button with these two classes as mentioned in the challenge it worked like charm but as i click on the button it was displaying that ugly black border so i tried adding few lines of CSS code but it didn’t work it didn’t remove the outline on focus as it should can someone explain to me why those borders are being displayed.

image

The code I used for adding the button.

<button class="btn btn-default">Like</button>

The CSS code I tried to remove the Outlines

.btn-default:focus
  {
    outline: none;
    border: none;
  }

  .btn:focus
  {
    border: none;
    outline: none;
  }
2

It’s just a specificity issue. You can increase the specificity of the selector or add !important to the value.

Using !important

.btn,
.btn:focus {
  border: none !important;
  outline: none !important;
}

Or higher specificity selector.

<button id="no-outline" class="btn btn-default">Like</button>


#no-outline {
  border: none;
  outline: none;
}

Just as an aside. Bootstrap is now at version 5 and the version you are using is version 3. Just in case you switch versions at some point know that they make changes to the classes (e.g. btn-default is not a thing anymore in V4 and V5)

3

Yes I know I am learning the bootstrap from the FreeCodeCamp thanks for telling me about the btn-defaultI was scratching my head because I was not able to found info for the it on there website and w3schools also thanks for your answer to question I got it

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.