Inspiring

Question

Re: Bootstrap "component is not fully compatible..." [Branched]

Forum|Forum|4 years ago
June 11, 2021
1 reply
708 views

[Moderator branched & moved to new topic.]

Hi Nancy

I have the same problem, but the boostrap files are version 4?

When I try and add a navbar menu, it gives me the same message as for the person above, that:

"The component is not fully compatible with the current Bootstrap CSS/ JS file (lower than 4.4.1). A new Bootstrap CSS/JS file will be created and linked from the document."

When it creates this new file, the contact form stops working fully - it still sends the message but the validation of email sent (Thank you for your message!) opens up as plain text in a blank html page rather than as a pop-up on the original contact form page.

The same thing happens if I try and update the script files (jquery.min.js, validator.min.js, bootstrap.min js, popper min js) linking to them from the cdnjs libraries.

I can't find a way of including a navbar menu and keeping the contact form working? Below are the references to the script files in the html contact page.

head>
    <title>Contact Form</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link href='custom.css' rel='stylesheet' type='text/css'>
</head>

<body>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
    <script src="contact.js"></script>
</body>

</html>

This topic has been closed for replies.

Nancy OShea

Community Expert

@Weat01,

When you use scripts sourced from CDNs as I often do because I prefer to work with the LATEST stable release versions, you have to remove what DW adds to your code otherwise you end up with duplicate entries. DW does not get updated often enough to keep pace with framework updates. The other option is to use the scripts that DW provides for you in your local site folder. It's your choice.

Latest stable release version of Bootstrap = 4.6

https://www.bootstrapcdn.com/

Latest stable release version of jQuery core library = 3.6

https://code.jquery.com/

Nancy O'Shea— Product User & Community Expert

W

Weat01Author

Inspiring

Thank you, I have bookmarked that page.

I still have a problem though, even after updating.

Here is the working form, but without the navbar menu

https://www.quodvultdeus.com/contact-form/QVcontact.html

Here is the (partly) working form, with navbar menu, but displays the success message in plain text.

https://www.quodvultdeus.com/contact-form/QVcontacttest.html

I cannot work out what i need to change to get the success message to show up as for the first working version. Any ideas?? It is driving me mad..!

Nancy OShea

Community Expert

Why do you have SO many CSS & JS files? This won't work.

Only 1 CSS for Bootstrap is needed. You have 2 and they are for DIFFERENT versions. And it would be much simpler for you if you combine your custom CSS code into 1 stylesheet called custom.css. And place it below Bootstrap 4.4.1

<link href="/css/panel.css" rel="stylesheet" type="text/css">
<!-- Bootstrap -->
<link href="/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link href='custom.css' rel='stylesheet' type='text/css'>
<link href="/css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">

Now to the bottom of your document. Again, you're allowed one version each of jQuery, Popper and Bootstrap. How many do you have? And the Bootstrap JS version must match your CSS which will be 4.4.1. So please resolve those issues now. BTW I don't know what 1000hz bootstrap validator script is for but I don't think it's relevant here unless you're using Bootstrap 3 which you're not, so get rid of it.

<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="/contact-form/contact.js"></script>
<br>
<hr class="my-4">
<div class="row text-center">
<div class="col-lg-6 offset-lg-3">
<p>Copyright &copy; 2021 &middot; All Rights Reserved &middot; Quodvultdeus.com</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="/js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap-4.4.1.js"></script>

When you've got all that resolved, validate your document. Upload changes to your remote server for testing.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded