The form control classes in Bootstrap 4 are experiencing issues and are not performing as expected

1) The border color of form input elements does not change to green, orange, or red as expected.

2) The related gif like "ok" or "x" is not being inserted into the correct place of the input field.

I tried using form-control-success, form-control-warning, and form-control-danger classes but they did not work. Why?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <label class="form-control-label text-success" for="inputSuccess2">
            Success
        </label>
  <input type="text" class="form-control form-control-success" id="inputSuccess2" aria-describedby="inputSuccess2Status">
</div>
<div class="form-group">
  <label class="form-control-label text-warning" for="inputWarning2">
            With Warning
        </label>
  <input type="text" class="form-control form-control-warning" id="inputWarning2" aria-describedby="inputWarning2Status">
</div>
<div class="form-group">
  <label class="form-control-label text-danger" for="inputError2">With Error</label>
  <input type="text" class="form-control form-control-danger" id="inputError2" aria-describedby="inputError2Status">
</div>

EDIT:

A solution to this issue can be found [here][1]

[1]: Bootstrap 4 form input with icon for validationstrong text

Answer №1

1) Bootstrap 4 does not contain predefined classes like .form-control-success or .form-contol-danger. However, you can create your own in your stylesheet as shown below:

.form-control.form-control-success:focus{
   border-color: #28a745;
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

2) If you want to add gifs to your input fields, you will need to customize your html/css/js. Check out this link for more information: https://getbootstrap.com/docs/4.3/components/input-group/#custom-forms

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

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

What is the reason behind the overflow in the HTML body?

I am currently honing my skills in front-end development by attempting to replicate the functionality of . Everything seems to be working fine, except for the fact that there is an overflow issue identified within the <body> element when inspecting w ...

JavaScript is having trouble locating the HTML select element

Having trouble selecting the HTML select element with JavaScript? You're not alone. Despite trying different solutions found online, like waiting for the window to fully load: window.onload = function(){ var opt = document.getElementsByName("prod ...

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

The Bootstrap 4 accordion card featuring a flexbox table is displaying some excessive white space

In my BS4 accordion, there seems to be excess white space under the flexbox table in the card body. I've tried replicating the issue in a regular container without success. It appears that flexbox tables do not interact well with accordions, as removi ...

Exploring the Benefits of jQuery History Plugin, Optimizing with Google Sitemap and

Despite searching online, I have yet to find a precise solution to my query. On my index.php page, there are two specific DIV's: #post-title and #post-content, whose content is dynamically loaded through a jQuery function triggered by clicking a link ...

Troubleshooting the vertical alignment problem in Bootstrap 4 navigation bars

Below is the code I am using for my navbar: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="/">BRAND</a> <div class="navbar-collapse"> ...

Center elements with CSS

When my window is at full width, my items are displayed like this: https://i.sstatic.net/sjtxC.png However, when I resize the window, the Submit button moves up. https://i.sstatic.net/zfH73.png I am looking for a way to keep it evenly centered. Can someo ...

What is the optimal number of keywords to include in the META keywords tag?

I recently came across a discussion about the importance of the keywords meta tag in HTML for search engine visibility, particularly on platforms like Yahoo! and Ask. While most of us may not have inside knowledge of search engine algorithms, I am curious ...

Opacity in text shadow effect using CSS

Within my text lies the following css snippet: .text-description-header { font-size: 250%; color: white; text-shadow: 0 1px 0 black; } Observe the dark shadow effect it possesses. Inquiry I am curious if there is a way to alter the shadow t ...

Prevent the sidebar from collapsing or disappearing when the viewport is less than 768px in Bootstrap

Utilizing the Bootstrap classes side-nav and nav-sidebar, I have created a side navigation bar. However, there is an issue - when the viewport is less than 768px, the side navigation bar disappears. Below is the snippet of my HTML code: <ul class="nav ...

How can I send a value from a for loop to a URL within a modal using Django?

Currently, I am working on a project that involves using a for loop with buttons and their corresponding pk values. {% for obj in all_objects %} <button data-toggle="modal" data-id="{{ obj.pk }}" data-target="#myModal" class="open-my-modal"> {{ ob ...

jQuery does not seem to be able to recognize the plus sign (+)

I am currently developing a calculator program and facing some challenges with the addition function. While the other functions ("/", "-", "*") are working fine, the plus ("+") operation seems to be malfunctioning. Here's the snippet of HTML and JavaS ...

How can you exhibit choiceType values in Symfony as various hues?

I am struggling to find the right way to save an integer value in my database and display it as a color. Any suggestions on how to achieve this? Here is what my Form currently looks like: public function buildForm(FormBuilderInterface $builder, array $op ...

Tips for implementing cellRenderer in ag-grid table using React JS

Using the react js ag-grid method, I created a table and then passed my json data into the React table. The json file data is as follows: { "posts": [{ "cam1": "3 persons, 1 car, 1 bottle, 2 chairs, 1 tv", "cam ...

JavaScript file isn't being called by index.html

I am working on establishing a basic client/server connection using node.js modules along with a straightforward HTML page. The content of the HTML page is as follows: <script type="text/javascript" src="index.js"></script> The index.js fi ...

"Eliminate any inline styling from a string element with the power of JavaScript/j

If I have the following string: let sentence = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>'; This string contains multiple elements a ...

What is causing the browser to completely ignore the viewport meta tag and mobile style sheet implementation?

I am currently working on setting up a website where I want the page to initially appear zoomed out all the way using a viewport meta tag. Additionally, I would like to use a separate stylesheet for mobile devices. However, no matter what I try, the page d ...

JavaScript can be used to target the textbox and give it focus

I am currently working on a code that should focus on textboxes based on their arrangement. However, I am facing an issue where the code is directing the focus to the third textbox. Instead, I want it to focus on the textbox based on its position in the ...

Error encountered while attempting to save HTML table data as text in MySQL due to SQL syntax

Query for adding text to the database: INSERT INTO uri VALUES('') I encountered the following syntax error: 'MySql.Data.MySqlClient.MySqlException' was found in MySql.Data.dll You have an error in your SQL syntax; please refer to t ...