Changing the border color of a Bootstrap 5 button using custom CSS styling

I have been working on a page to control my amp using various JavaScript libraries.

1.) How can I change the blue border of a selected Bootstrap 5 button to a lighter green without using SCSS?

Example:

Repository (apologies for the mess, it's not the latest version but the issues are noticeable): https://github.com/schoko11/KEKO-WEB

2.) On a large screen, there is a white background at the bottom because the grey background does not cover the entire viewport height.... -> I have set the body to

height: 100vh;

Thank you!

cssbootstrap-5

Answer №1

1.) The blue border on this page can be changed only via CSS or Sass (Scss). It is actually a box-shadow on the :focus and/or :active pseudo class. You can refer to the document here for more information.

2.) Ensure that the allCont class has full height.

<!DOCTYPE html>
<html>

    <body>
        <div class="allCont">
            <div class="wrapper-for-test">
                <button class="btn btn-primary" type="button">
                    A Button
                </button>
            </div>
        </div>
    </body>

</html>

body {
    height: 100vh;
}


.allCont {
    background-color: rgba(0, 255, 0, .5); /* for test only */
    height: 100%;
}

.btn-check:focus + .btn-primary, 
.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(255,0,0,.5);
}
.btn-check:active + .btn-primary:focus, 
.btn-check:checked + .btn-primary:focus, 
.btn-primary.active:focus, 
.btn-primary:active:focus, 
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(255,0,0,.5);
}

/* for test only */
.wrapper-for-test {
    padding: 50px;
}

View the live demo here

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

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...

javascriptjquerycssoverflow

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

Error in content policy for CSS in Stripe Checkout

I am currently attempting to integrate Stripe Checkout into my Ionic App. I have created a Directive that injects the form into my content view, however, upon execution, the CSS fails due to a content policy violation: checkout.js:2Refused to load the s ...

javascriptcssionic-frameworkstripe-payments

The HTML navbar menu icon shifts downward by one line on smaller screens

Here is my code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img src="vc-transp.png" height="50px" style="margin-left: -30px;"></a> <button class="navbar-toggler" ...

htmlcssbootstrap-4

An issue has been identified where a single image is not displaying properly on Android devices, as well as IE7 and

Hey there! I recently created a Wordpress site and it seems that the Art Below logo isn't appearing in IE7, IE8, and Android for some reason. Would anyone be willing to help troubleshoot this issue? If you have fresh eyes, please take a look at the f ...

htmlcsswordpress

Position a button and input element in alignment

I recently decided to challenge myself by recreating the Netflix registration page as a practice project. Using the flexbox model on the webpage, I encountered an issue with aligning the email input and the "Get Started" button. Despite trying different me ...

htmlcssflexbox

Numerous SVGs sharing identical IDs

Is it possible to include multiple SVGs on an HTML page and utilize the same IDs in each of them? <div> <svg height="0" width="0"> <clipPath id="svgPath"> ........ </svg> <svg height="0" width="0"> < ...

javascripthtmlcsssvg

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

Get a calendar that displays only the month and year

I am looking to incorporate two unique PrimeFaces calendars on a single page. The first calendar will display the date, while the second one will only show the month and year. To achieve this, I have implemented the following JavaScript and CSS specifica ...

javascriptcssprimefacesdatepickercalendar

Modifying the CSS design of specific columns within a table created using JavaScript

A unique way to showcase JSON data in a table is by utilizing a for loop within a function. This method, however, does not assign an ID or Class to the table. To hide the final three columns of this table using CSS, the following code can be employed (whe ...

javascriptcss

Having trouble making setTimeout work with a nested function in it

I've encountered an issue with the setTimeout() function. Take a look at my code snippet below: $('#start').click(function(event) { var result = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // generates a random value between ...

jqueryhtmlcss

Trouble with center alignment of div in CSS

I attempted to create a centered horizontal menu on my webpage but the 'div align=center' attribute is not functioning correctly. .nav ul { display: block; list-style-type: none; margin: 0; position: absolute; } .nav li { display: in ...

htmlcss

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

Transitioning the CSS background for a lightbox display

I am currently experimenting with creating an image that fades in along with its background when clicked using the :target selector. (Similar to Lightbox: , but done purely with CSS). Here is the HTML: <a href="#firstimg"><img src="img/thumb-3.j ...

htmlcss

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

jquerycss

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

Creating Custom GTK Themes using CSS3

Just a quick question: Can CSS3 be used to style GTK3 applications? ...

cssgtk

When the mouse hovers over the text inside a div, the link does not work in Internet Explorer

Here is some code for demonstration. I'm facing an issue where the link spans over the entire div, which works perfectly in Firefox. However, in IE, when I hover over the text, the cursor changes to a text cursor and the link doesn't work there. ...

htmlcssinternet-explorer

Placing divs in rows and columns at specific breakpoints

I have a footer with two divs that I need to be centered and side by side. When the screen size reaches 960px, I want the second div to move below the first one while still staying centered. Does anyone know how to achieve this? Below is my code snippet: ...

htmlcssflexbox

The Nodejs express static directory is failing to serve certain files

Hello everyone, I'm currently working on a project using NodeJs, Express, and AngularJS. I've encountered an issue where my page is unable to locate certain JavaScript and CSS files in the public static folder, resulting in a 404 error. Strangely ...

javascriptcssangularjsnode.jsexpress