Unusual display of feedback text in Bootstrap 4

When I directly copied this code snippet from Bootstrap 4:

<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>

I end up with the following result:

This issue occurred while using alpha 4 and alpha 5 versions of Bootstrap.

I wonder if it could be due to my usage of Flatkit and Laravel/Blade?

javascriptjquerycsslaravelbootstrap-4

Answer №1

Check out this CSS snippet: 

https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>
<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>
</body>
</html>

In a different version of CSS, I noticed an issue similar to this one.

Answer №2

It turns out that there were two different versions of the app.css file – one in the public/css folder and another in the /assets/styles/ folder. After removing the first one, everything started working perfectly. The second file seemed to be a default CSS file generated by Laravel, as it referenced Bootstrap 3 in the comments. Apologies for any inconvenience caused by my mistake!

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

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

I'm working on a complex Mega Menu project that is activated upon hovering, using the powerful combination of Tailwind CSS and Alpinejs. The functionality is mostly there, but I've encountered some bugs along the way. Despite my attempts to impl ...

javascriptcssmenumegamenualpine.js

Exploring the world with Algolia's search capabilities

I've been working on implementing geo search with Algolia for a web project. Here's the code snippet I have so far: var searchClient = algoliasearch(Algol_APP_ID, Algol_API_KEY); var itemIndex = searchClient.initIndex('item'); functio ...

javascriptgeolocationalgolia

Error occurs in ReactJS App when the state is updated in Redux only after dispatching the same action twice

Check out the following code snippet: ChartActions.js import * as types from './ChartTypes.js'; export function chartData(check){ return { type: types.CHART_DATA,check }; } ChartTypes.js export const CHART_DATA = 'CHART_DATA ...

javascriptreactjsreduxreact-redux

Discovering how to adjust the "border-spacing" in a React Material-UI Table to ensure each row is nicely separated

I am looking to create Material-UI Collapsi Table Rows with separate styling. Check out the link for more information: https://material-ui.com/components/tables/#CollapsibleTable.tsx const theme = createMuiTheme({ overrides: { MuiTable: { root ...

cssreactjsmaterial-ui

Building a Sharepoint application with Angular 2 using the CLI and Webpack

Trying to deploy an Angular 2 CLI App to a SharePoint 2013 site has been quite challenging. The app works fine when embedded via a Content Editor Webpart, but the console throws an exception: zone.js:158 Uncaught Error: Sys.ParameterCountException: Parame ...

javascriptnode.jssharepointangular2-cli

Exploring JSON data in AngularJS

After creating a new Angular App, I decided to store some data in a JSON file. My main concerns are where to best store the .json file within the app and how to access it. Currently, I am facing this error in my Chrome console: GET http://localhost:8000/t ...

javascriptangularjsjsonget

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...

javascriptangularjshtml

Having trouble with JSON search not functioning as expected in Select2 4.0?

After numerous hours of effort, I finally managed to successfully load and display the json file, complete with the flag icons using Select2 4.0. The code ended up appearing deceptively simple. However, I am now facing an issue where the search function i ...

javascriptjqueryjsonjquery-select2

The requested resource does not have the 'Access-Control-Allow-Origin' header, resulting in a 401 error

I've been working on integrating spell check functionality using the Bing Spell Check API, but I've run into a 401 error. The specific error message is: The requested resource does not have an 'Access-Control-Allow-Origin' header. This ...

javascriptjqueryhtmlapispell-checking

The Ultimate Guide to Setting up SVG's Viewbox, Width, and Height for Scalability and Responsiveness

As a beginner in SVG design, I find it challenging to scale, zoom in/out with the container and ensure responsiveness across different devices. I wonder if it's possible to create an SVG that adapts to all device sizes and effectively handles browsin ...

htmlcsssvg

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to

Using .env in a *.js file allowed me to set the BANK variable as either A_BANK or B_BANK like so: BANK=A_BANK or BANK=B_BANK However, when passing the argument as A_BANK or B_BANK like: --bank A_BANK in a shell script loop for var in $@ do if [ ${var} ...

javascriptnode.jsshellvue.js

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

Currently, my goal is to successfully install angular-ui. Following the tutorials, I have attempted all commands such as: npm install angular-bootstrap However, this command results in an error message: +-- UNMET PEER DEPENDENCY angular@>=1.5 After ...

javascripthtmlcssangularjsbower

Why is it that masonry is typically arranged in a single column with overlapping

I have been using the appended function in my code to add elements to a masonry instance that has already been initialized. However, I am facing an issue where all the tiles are being laid out in a single column and some of them are overlapping each oth ...

javascriptjqueryjquery-masonrymasonry

Challenges related to height

Having an issue with height in my code. My footer is set up like this: <html> <body> <div class='wrap'> <div class=principal></div> <div class='clear'></div> <foo ...

jqueryhtmlcss

JavaScript - memory heap exhausted

Recently, I encountered an issue with my API written in Node.js. The purpose of this API is to read data from a MySQL database, write it into a CSV file, and allow users to download the file once the writing process is complete. Initially, everything was f ...

javascriptmysqlnode.jsexpressstream

Error: The variable "weather" is not defined while using React with the weatherbit API

I'm currently developing a React application that utilizes the Weatherbit API. However, I have encountered an issue with the weather object when calling my data array. Below is the code snippet where the problem occurs: import React from "react&q ...

javascriptreactjsweather-api

Achieving consistent positioning for child elements at the top

I have the following code. I can't figure out why the top position of div1 in the second block is different from the first one. When div1 in child1 contains text or other elements, the top position of div1 and div2, div3 is equal. Can someone explain ...

htmlcssposition

Angular 2, React, or any other modern framework.getList()?.map

I have experience working on multiple angular 1 projects and I absolutely enjoyed it. We have several upcoming projects where I need to recommend JavaScript frontend libraries/frameworks. With the decline of angular 1 and mixed reviews about angular 2&apos ...

javascriptangularjsangularreactjsvue.js

Using JavaScript regex to eliminate content enclosed in parentheses, brackets, and Cyrillic characters

Is there a way to transform (Test 1 / Test 2) [Test 3] Отдел / Here is title - subtitle (by Author) - 1234 (5678-9999), descriptions (best), more descriptions into Here is title - subtitle (1234) (descriptions) using a combination of JavaScript an ...

javascriptjqueryregex

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight