Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

The Bootstrap migration guide mentions:

The .has-error class has been renamed to .has-danger.

However, I have found that this change does not seem to take effect. The border and text are not colored as expected.

For instance:

<div class="form-group has-danger">
    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1">
    <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Here is a demonstration:

https://jsfiddle.net/uLa0spfm/

twitter-bootstrapcssbootstrap-4

Answer №1

Successfully managed to make it function. @ZimSystem was right about this.

.has-danger was present in the Alpha version but was eliminated in Bootstrap v4 Beta. You will need to utilize the is-invalid selector in the input and also incorporate class="invalid-feedback" for error messages.

Here is an example:

<div class="form-group has-danger">
    <label class="form-control-label">Username</label>
    <input type="text" class="form-control is-invalid">
    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>

Answer №2

Bootstrap 4 is currently in Beta, and the migration documentation may not always be up to date with the actual releases. Changes in validation, such as the removal of the has-danger class, have been noted. For more information on validation changes in the beta version, refer to this link.

For further insights, check out the discussion on Stack Overflow regarding struggles with validation in Bootstrap 4: Can't make the validation work in Bootstrap 4

Answer №3

It seems that the beta release is missing the .has-* classes. To solve this issue, switch to the alpha-6 version.

Updated fiddle with the latest CDN.

https://jsfiddle.net/uLa0spfm/1/

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

What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site lengt ...

javascriptcss

"Implemented a user-friendly header and footer that stick to the top and

My goal is to create a fixed header and footer, allowing the main content to scroll underneath while keeping the right navigation in place. To achieve this effect, I've been experimenting with different solutions. One of my attempts can be viewed her ...

jquerycss

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

htmlcss

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

What techniques can be used to resize an image to perfectly fit a square on a webpage?

A challenge on the web page is to display images in a square format of 90 * 90 pixels. However, the sizes of these images are not consistent and may vary from 80*100 to 100*80 or even 90 * 110. The requested solution is to stretch the image as follows: ...

javascripthtmlcss

The act of resizing a window causes the text to be forcibly expelled from its containing div

When you hover over an image in a grid, text and a button appear. However, when the window is resized, the content ends up overflowing out of the div. This issue is part of my first project that I am working on during a bootcamp. I have decided to keep th ...

htmlcss

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

cssreactjs

Tips for stopping the loading of background images on an image slider

I am utilizing unslider to showcase an image slider on the landing page of my website. The slides are designed with background images in the CSS, and they adjust based on the media query. My concern is that I don't want all the slider images to load a ...

jquerycssimageoptimization

Unleash the potential of a never-ending expansion for grid cells on Canvas

ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap ...

htmlcssangulartypescriptcanvas

Issues are arising with the .mouseover functionality within this particular code snippet

Learning Javascript has been a challenge for me so far. I tried following a tutorial, but the result I got wasn't what I expected based on the video. I'm wondering why that is and how I can fix it. I'm aiming to make a box appear suddenly w ...

javascriptjqueryhtmlcss

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated ...

javascriptjqueryhtmlcsstwitter-bootstrap

Activate just the show more / show less button on the website that has several buttons with identical ids

Whenever the "show more" button is clicked, additional images are displayed in the gallery and the button text changes to "show less". However, in my ExpressionEngine (CMS) templates and entries, all "show more" buttons share the same id, causing other but ...

javascripthtmlbootstrap-4toggle

Issue with getting Bootstrap sticky-top to function on sidebar column

My goal is to implement a sticky sidebar on the right side of the page. The sidebar menu is contained within a grid column. I have attempted to utilize the sticky-top class, following the guidance provided in this question, but unfortunately, it does not s ...

htmlcssbootstrap-4sticky

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui

overlapping text placed directly above another text

Is there a way to place a text fragment above another part of the same line? <div>Th<div class="ac">Am</div>is is an ex<div class="ac">E</div>ample line</div> If implemented, it should display as: Am E This ...

htmlcss

Adjusting column styles on mobile or desktop devices

My row has two columns <div class="row"> <div class="col-9"> hello </div> <div class="col-3"> world </div> </div> But I want to change the column classes for small screens, so they would be ...

htmlcsstwitter-bootstrapbootstrap-5

How to access bespoke attributes in Scene Builder using JavaFX?

I am on the hunt for a way to designate customizable properties for my custom controls. Jens Deters has already created some fantastic custom controls utilizing fontawesomefx for JavaFX. Once you import the jar files into Scene Builder, you can easily inc ...

cssjavafx-2custom-controlsscenebuilderdeclare-styleable

Outlook failing to recognize text dimensions

Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...

htmlcssoutlookhtml-emailfont-size

What is the best way to distribute components with varying cell heights?

I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...

cssreactjsflexboxmaterial-ui