bootstrap 4 feedback text doesnt render properly

Question

bootstrap 4 feedback text doesnt render properly

184 views Asked by Samoht At 24 November 2024 at 11:47

when literally copy pasting this 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 get this:

Getting this with alpha 4 and alpha 5.

Maybe it's because I'm using flatkit and laravel/blade?

Original Q&A

There are 2 answers

Sunil B N On 19 December 2016 at 09:29

Try with CSS: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 other css version, I could see this issue.

**Samoht** · Accepted Answer · 2016-12-19 12:37:54

So apparently there was a file called app.css included in the public/css folder AND an app.css file included in the /assets/styles/ folder. By removing the first one it works like a charm. The second was probably a default css file made by laravel, it said bootstrap 3 in the comments so this one was definitely the culprit. Sorry for wasting your time folks :s

TechQA.

bootstrap 4 feedback text doesnt render properly

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in LARAVEL

Related Questions in BOOTSTRAP-4

Popular Questions

Popular Tags

Trending Questions