I've seen many Bootstrap button examples where I click on the button and it shows an outline. I have tried to copy it, but my button does not show the outline.
What is the problem?
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- Body -->
<button type="button" >Click me!</button>CodePudding user response：
The version of bootstrap that you are using seems to not have this outline as can be seen on their website. The latest version that seems to have the outline is version 5.1.3.
Has it: https://getbootstrap.com/docs/5.1/components/buttons/
Does not have it: https://getbootstrap.com/docs/5.2/components/buttons/
CodePudding user response：
The one you are using is bootstrap 5.3 alpha so with this version bootstrap has changed its design principles. One of them is an outline at the click of a button. If you want an outline you can go to it older version.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div style="margin:10px;">
<button type="submit">Button</button>
</div>- Bootstrap 5.3 Alpha (https://getbootstrap.com)
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div style="margin:10px;">
<button type="submit">Button</button>
</div>CodePudding user response：
You did not include an example of what you have seen. By your description, I may try to guess your complain is about the default theme for Bootstrap v5 buttons in opposition to Bootstrap v4 buttons, which show an outline when clicked. Version 5 does show the outline only when navigating by using Tab. In fact, that occurs in the example of your question: click does not outline, but tab navigation does.
In this case, you have a few options:
- Keep with version 5 and its default behaviour.
- Downgrade to version 4 to get the desired behaviour.
- Create a custom CSS to get back the outline.
- Create or get a custom theme.