Develop Reference

Is it possible to use bootstrap 4 in a nextjs project by just adding a link stylesheet?

I have this project where I imported bootstrap like this on my header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
Everything was working fine until I decided to add a carousel.
The carousel shows up properly, but it doesn't rotate and the buttons on the side doesn't work.
I also noticed that my colapsed menu also don't work.
On my research I saw a lot of people suggesting to use reactstrap and some other third party libraries, but I'm wondering if it's possible keep using the link stylesheet.
From what I read the problem is with the jquery and bootstrap being imported in the wrong order, which might cause those elements to break.

Solved the issue using another website as reference:
https://www.bootstrapcdn.com/
Instead of using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
I used
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
And it is finally working.

but it doesn't rotate and the buttons on the side doesn't work. I also noticed that my colapsed menu also don't work.
there is no functionality on your pages if dont import the js scripts.
add these scripts also and your buttons and collapse menu should start working
**for css link**
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Bootstrap Dialog CSS Causing Issues

I m having a problem with Bootstrap Dialog library designed to assist in modal windows.
I would like to use the library in WHMCS but it seems as though the files I need to include break the template.
As indicated by the examples I included:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
But as soon as I do this the template breaks. It throws litterally everything out of place, including the menus and images in WHMCS. But the popup I excecute does show.
If I remove the <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> the template does go back to normal, but then the command that I call to show the dialog does nothing. I cannot see a response in the console, nor do I see anything happen in the browser anymore.
What could be the cause & a possible solution to this issue?
Is there a way to use this library and/or another similar library?
I would love any and all advice in this matter.
Bootstrap Dialog: https://nakupanda.github.io/bootstrap3-dialog/

Semantic UI Javascript not working

I have just switched from Bootstrap to Semantic-UI and I started to design a page, but nothing javascript related works (dropdowns, popups, etc). Here is the header code that I am using
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="#routes.Assets.at("stylesheets/semantic.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="#routes.Assets.at("javascripts/semantic.min.js")"></script>

I know nothing about the play framework, so this is just a guess. Probably you have to initialize the component (dropdown etc.). At least you have to do this when using the Meteor.js framework.
$('.ui.dropdown').dropdown();

Jquery doesn't have an effect on my elements

For whatever reason my jQuery isn't working, yet it seems to work when I put it in JSFiddle. That being said, I assumed the library wasn't importing correctly so i double checked it and everything seemed alright. Here is the JSFiddle example. I included all of the code, including the links that I have in my index file. It works perfectly in JSFiddle, but when I try it on my host it doesn't work. I've tried a few browsers but that didn't seem to change anything.
<head>
<title>Artanes Development</title>
</head>
<link rel="icon" type="image/png" href="/img/favicon.ico">
<!--Links-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300|Abril+Fatface|Vollkorn:400italic,400|Open+Sans:800|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='script.js'></script>
Here are all the links i have at the top of my page.

You have uploaded the Project to Web hosting FTP.
You should be using:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and not:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Modal not working

I am working on a personal project with Bootstrap 3, but when I add things like modals/dropdowns, they don't work. I have looked at the code and it is all fine, so I am assuming that it is an issue with the linking of the files.
Header links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/carousel.css" rel="stylesheet">
Footer links:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I also have the modal which is an exact copy from the Bootstrap website and all of the code for that is correct.
Do i have to delete all of the other local CSS/JS files or something?
The HTML for he site can be found here.

As far as I can see you have not loaded the jQuery-Library. As indicated on Bootstrap's page, you need jQuery for any Javascript-Component of Bootstrap, see here
Make sure to load it before the Bootstrap Javascript, like this:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Then you should be all set up.

Looking at the HTML i could see that it is missing jquery library path. Please include it at the top before any other JS files in your HTML

You are not included jquery in your code, just include jquery.js before bootstrap.min.js
<!-- Core javascript and icons -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>