What is the process for implementing Bootstrap 5.3.3 css to restore button colors to their default shades and include glyphicons?

I've utilized Dropzone.js for a few years now and have an application that's been functioning smoothly. There are three buttons being used.

<span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Browse files...</span>
    </span>
    
<button class="btn btn-primary start">
        <i class="glyphicon glyphicon-upload"></i>
        <span>Start</span>
    </button>
    
<button data-dz-remove class="btn btn-danger delete">
       <i class="glyphicon glyphicon-trash"></i>
       <span>Remove</span>
    </button>
    

I've been using Bootstrap 3.1.1 from cdn.jsdelivr.net and everything has been working perfectly. The buttons appear like this:

https://i.sstatic.net/JpQdLMN2.jpg

Now, I'd like to incorporate a modal but it's not compatible with Bootstrap 3.1.1

If I switch to Bootstrap css from cdn.jsdelivr.net, the buttons look different as shown here:

https://i.sstatic.net/4aQNeT4L.jpg

The modal functions, however, the button color is slightly off and the glyphicons are missing.

I aim to use the most up-to-date version of Bootstrap css. When I switch to Bootstrap 5.3.3 from cdn.jsdelivr.net, the buttons turn out like this:

https://i.sstatic.net/KUCXz8Gy.jpg

The modal works but once again, the button colors are slightly different and the glyphicons are no longer visible. Furthermore, the Remove button only shows an outline without any fill.

How can I implement Bootstrap 5.3.3 css while restoring the original button colors and glyphicons?

In the end, I would like to customize my own colored buttons with either glyphicons or font-awesome icons. Is this feasible?

Answer №1

To revert the button to its original color, convert the span html element into a button html element. Place all other html elements inside the newly created button element. The code for the first button will appear as follows: <button class="btn btn-success" type="button" value="Input"

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

html.input javascript/jquery

This is an example of an AJAX form with 2 textboxes and a radio button to choose between unlocking and resetting the password. The goal is to make the password label and textbox disappear when the "Unlock" option is selected. However, this cannot be achi ...

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

Combining the powers of Nextjs and Vue

Currently utilizing Vue.js, I am now looking to leverage the Next.js framework for its SEO capabilities, server-side rendering features, and other advantages. While I do have some experience with React, my primary focus is on mastering Vue.js. Is it poss ...

Enhance my code to eliminate repetitive elements

Check out this unique plant array: export const uniquePlants = [ { name: 'monstera', category: 'classique', id: '1ed' }, { name: 'ficus lyrata&ap ...

How can you use jQuery to pick and modify the characteristics of a class?

I've identified the specific class that I wish to modify one of its properties... https://i.sstatic.net/8rvRo.png What is the jQuery method for selecting and changing the opacity property to 0.1? My attempts have not been successful... var element ...

What is the solution for resolving the problem of the cursor jumping to the end when converting numbers in JavaScript?

After exploring the inquiries regarding converting digits in JavaScript, such as What's the solution and the right way to convert digits in JavaScript? and How to convert numbers in JavaScript, and problems with commands to remove non-numeric characte ...

The function Expo.Fingerprint.isEnrolledAsync will provide an output that includes information about fingerprint

Attempting to incorporate fingerprint authentication into my react native app. Utilized Expo SDK for this purpose. Although the Expo.Fingerprint.authenticateAsync() method claims to return a boolean, it actually returns an object when examined closely. E ...

Setting color values for each pixel of a createGraphics object using P5.js

The code snippet provided below is intended to set the color value of each pixel within the createGraphics object to red. However, the output only displays a gray background. ////////////////////////////////////////////////////////// function setup() { ...

What is the process for including jQuery js files in a React application?

I recently made the transition to React in order to create a single page application. Prior to this, I had 8 HTML files and 8 JS files that were linked using script tags like so: <script src="pathHere"> </script> With React, the HT ...

List of objectives for the JavaScript function

I have a question: How can I incorporate an array of targets into this script? $(document).ready(function () { $('#kategorierbuttons').click(function(e) { var num = $(e.target).index() + 1; $('option:nth-child(' + num + ')& ...

Avoid updating numerous divs when hovering over them

Creating a brief survey utilizing HTML, CSS, and JavaScript. The goal is to present a question and allow the user to rate it on a scale of 1-5. It would be ideal to have a responsive scale where hovering over 1 turns it yellow, hovering over 2 highlights ...

Issue arises when attempting to transfer data collection object from Jquery ajax Method to MVC Controller resulting in null object being displayed

I am attempting to pass a data object to an MVC controller using a jQuery method. When I click the submit button, a data object is created in a JavaScript method. The data object is not null in the Ajax method. However, when I try to pass it to the MVC con ...

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

There is a random section that keeps crashing on the website

I have encountered a bug on my one-page Bootstrap template website. One of the sections is causing issues after multiple page refreshes. Despite checking the console for errors, I am unable to identify the source of the problem. Here is the HTML code for ...

Encountering difficulty locating the $wpdb variable during an AJAX request

I am currently developing a PHP application for WordPress and facing a challenge in retrieving a value from a database using AJAX every 2 seconds. I have created a new function in a separate file to handle this task. <?php global $wpdb; function retrie ...

Selected - Establishing a Parameter Using URL Parameters

Recently, a site redesign I worked on involved integrating Chosen into a search form. In the previous version of the search, you could pass a variable through the URL to pre-select a value when the page loaded using the following code: function getUrlVars ...

React - anomalous actions of useState hook when setting state initially compared to subsequent state modifications

take a look at this code snippet: const {useState} = React; function App() { const [count, setCount] = useState(0); const onClick = () => { setCount((prevCount) => { console.log(prevCount + 1); return prevCount + 1; }); ...

Redirecting to the homepage with ScrollTop feature

With the development of my Single page HTML5 web application, I have encountered a scrolling issue. To scroll to the top of the page, I am implementing the following code: $('html, body').animate({ scrollTop: 0 }, 800); This functionality works ...

Utilize the camera feature within a designated div element

I'm having trouble understanding why the camera isn't showing up in the div. Am I making a mistake somewhere? <!DOCTYPE html> <html> <head> <script type="text/javascript" src="swfobject.js"></script> </head> & ...

What is the best way to ensure a texture is always facing the camera?

Latest Update: We have created a new demo to showcase the desired outcome. The demo includes an invisible skydome, a cubecamera, and an environment map. However, it is important to note that these techniques should not be utilized for the reasons previous ...