When clicking on a Bootstrap button, there is no visible outline

I've come across numerous examples of Bootstrap buttons where I can click on them and they display an outline. Despite my attempts to replicate this, my button doesn't show the outline as intended.

What could be causing this issue?

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2dfc2dcc18d809c84">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c5d8c6db979a869e97c7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>


<!-- Body -->
<button type="button" class="btn btn-primary">Click here!</button>

htmlcssbootstrap-5

Answer №1

The version of Bootstrap you are currently using is Bootstrap 5.3 alpha, which has introduced some changes to its design principles. One notable change is the addition of an outline effect when a button is clicked. If you prefer the older version without this feature, you can switch back to it.

  1. Bootstrap 5 (https://getbootstrap.com/docs/5.0/getting-started/introduction/)

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524c524e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div style="margin:10px;">
  <button class="btn btn-primary" type="submit">Button</button>
</div>

  1. Bootstrap 5.3 Alpha (https://getbootstrap.com)

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761419190205020417063643584558465b171a061e1747">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4a9b4aab7fbf6eaf2fbab">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div style="margin:10px;">
  <button class="btn btn-primary" type="submit">Button</button>
</div>

Answer №3

Your request seems to be related to the difference between Bootstrap v5 and Bootstrap v4 buttons. In Bootstrap v5, the outline is only shown when navigating with the Tab key, unlike in Bootstrap v4 where it appears when clicked. If you prefer the v4 behavior, you have a few options:

  1. Stick with version 5 and its default behavior.
  2. Downgrade to version 4 to achieve the desired outcome.
  3. Implement custom CSS to bring back the outline.
  4. Explore or create a custom theme that suits your preferences.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Javascript to maintain an ongoing sum within a <span> tag

I'm working on a code snippet to create a running total feature. Essentially, every time a user clicks a button to add the subtotal to the total, I want it to keep accumulating in the running total. Currently, the setup involves a dropdown menu with t ...

javascripthtml

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

javascripthtmlcssreactjsstate

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

javascriptjqueryhtml

What is the method for creating text outlines using html5/css3?

I have been experimenting with using shadows to outline text, which is a solution I came across in various Stack Overflow threads. However, support for text-outline and text-stroke features is currently limited. I am encountering an unusual issue with on ...

htmloutlinestrokecss

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

javascriptcss

Styling columns to be inline-flex without taking up the full height

I'm currently working on a project similar to "Trello" or "Zenhub," using a Kanban board with 4 columns placed in a div#board. The columns are set to display: inline flex, creating a neat horizontal alignment. However, I encountered an issue where eac ...

jqueryhtmlcssflexboxmaterialize

Having trouble with utilizing pako.js in your JavaScript code? The error "Pako is not defined

I'm relatively new to the world of JavaScript. Currently, I'm tackling an algorithm that involves deflating in Java and inflating in JavaScript. While researching solutions, I came across pako.js as a recommended tool for decompression. However, ...

javascripthtmlzlibcompression

retrieve the list of css stylesheets connected to a webpage

Currently, I am running some tests on Firefox's Error Console. My main focus is on identifying and rectifying errors in the stylesheets. For regression testing purposes, I need to compile a list of all HTML pages that are connected to these stylesheet ...

htmlcsserror-console

Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus. Here's how the newsletter design should appear (refer to the image below): Although I understand that it may not look exactly the same on Outlook, is the ...

htmlcssemailoutlook

Can someone please share the steps on how to insert a new row into a PrimeNg DataTable component

I am currently working on enhancing a table by adding a new row underneath the existing data list. This new row will contain a save button and allow users to insert information, such as saving a phone number. While I have indicated where the new row should ...

htmlangularprimeng

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

htmlcss

Having trouble with the open and create new post button not functioning properly

The submit post button, user name, and logout button are not functioning properly. Can anyone assist with this issue? F12 and jsintrc are not providing any useful information. Below is the HTML code for the create new post button which should direct to a ...

javascripthtmlangularjsionic-framework

Unusual Blank Space in HTML CSS Design

While working on my website, I noticed a peculiar white space appearing at the bottom of the page, but only when using Internet Explorer. Safari looks fine. I am currently using IE8. I would like the white background to end after the black navigation link ...

htmlcss

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

Executing animation after the completion of a transition

Is there a way to synchronize the bounce animation with the scaling of an object, so that it appears smooth and fluid? I've tried using the animation delay property along with the transition delay property, but they don't seem to align correctly. ...

javascripthtmlcssanimationscale

Ways to display JSON in a structured format on an HTML page

Is there a way to display JSON in a formatted view on my html page? The JSON data is coming from a database and I want it to be displayed neatly like the following example: { "crews": [{ "items": [ { "year" : "2013", "boat" ...

javascripthtmljsondateviewer

Activate the button when a checkbox is ticked or when using the "select all" checkbox

I'm facing an issue with a script that should enable a button when at least one checkbox is selected and a checkbox for selecting all checkboxes is used. The problem arises when I select the "select all" checkbox as it activates the button, but if I ...

javascripthtmljquery

Tips for getting a browser to clear the cache specifically for the .html files on your website

After making updates to a client's website, I'm encountering an issue where the browser is displaying a cached version of the site. The website consists of static .html files. Although clearing my browser's cache resolves the issue for me, I ...

htmlcachingbrowser

Replicating radio button functionality using buttons in an HTML document

I am attempting to simulate radio button behavior using normal buttons for a quiz application. Currently, my code is working as intended and permanently highlights buttons with the desired color. However, I want all other buttons in a question to be white, ...

javascripthtmlcss

What is the correct way to specify an image path for a background URL?

Currently, I am setting a background image for the hr tag using the following code: <hr style="height:6px;background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;border: 0;margin:0px!important"> However, I have now saved th ...

htmlcssimageangular