Navbar bootstrap 3 doesn't work in bootsrap 4 [duplicate] - javascript

This question already has answers here:
Bootstrap 4 default navbar is not working..
(4 answers)
Closed 4 years ago.
I have the same navbar in two HTML pages. On one page, it works perfectly with bootstrap/3.3.7. On the other page, I used Cards in Bootstrap 4.
When I comment out <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">, Cards works fine and navbar is not working. When I comment out <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">,
navbar is working but the Cards are not working.
Here is my code:
my code

why would you use 2 versions of bootstrap. bootstrap 4 has its own navbar. look at docs and use only bootstrap 4 so you can have both navbar and cards

Related

How can I get the script link for fontawesome.com? [duplicate]

This question already has answers here:
Font Awesome 5, why is CSS content not showing?
(6 answers)
I can't get my font-awesome icons to show up. Tried importing css with multiple methods
(3 answers)
Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?
(4 answers)
Closed 2 years ago.
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
This is the link where I need to get the script code from, but the link from here is not working.
The link to put in my HTML:
<script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
I think you are looking for a CDN.
You can simply google for packageName CDN.
I use bootstrap CDN for my projects, I would add this in my HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
But the CDN link might be different (e.g. you might want to use a different version of the package) so I suggest you to search it on the internet.

Can you mix bootstrap 3.3 and bootstrap 4.1? I have tried and it breaks the website

I am trying to use bootstrap and twitter bootstrap at the same time. Basically, I can't seem to get them to work together. Are they even supposed to work together? You can see the js Fiddle here. https://jsfiddle.net/paralaxwombat/v7hpoc6m/4/
There are two sets of bootstrap call lines.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
If you remove one of them, the nav bar works and the bottom doesn't. If you remove the bottom the nav bar doesn't work but the bottom does.
I am wondering if there is a workaround.
Twitter Bootstrap is Bootstrap. You are trying to mix version 3 and version 4.
They are not designed to work together. Bootstrap 4 is designed to completely replace Bootstrap 3.
Use version 4. Change the code which is following version 3 conventions to use version 4 conventions.
You are trying to use two different versions of the same library so I think the answer will be 'No'.
I don't know if there's a document with all the similarities and differences, but I know the 3.3 javascript api and the 4.1 javascript api conflict.
There are 2 versions of bootstrap and you are trying to use both of them at the same time. These are all versions of bootstrap Versions. If you want to know more about them check bootstrap.

How to apply css and js to specific element? [duplicate]

This question already has answers here:
Limit scope of external css to only a specific element?
(6 answers)
Closed 5 years ago.
I am using Bootstrap 4 for my project and I need to add some div to my project. Problem is this div element created using Bootstrap 3. Is there any way to use Bootstrap 3 for specific div?
<html>
<head>
<!--use Bootstrap 4 js and css-->
</head>
<!--Start to use Bootstrap 3 js and css-->
<div>
</div>
<!--Stop to use Bootstrap 3 js and css-->
</html>
First and foremost, if that is the website structure you got it is incorrect, and a proper structure can look something like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<meta charset="UTF-8"/>
<!-- Any required CSS or JS files goes here -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Apart from that, Bootstrap does indeed have CSS classes including "div", however, most of what it does requires you to give a class to an element in order for anything to happen. If it does anything else, you should double check in what order you are linking your CSS files since it does matter, and if that doesn't help, make specific classes yourself in your own CSS file to override it.

DataTables tables appear incorrectly

I am using Bootstrap 4 and I followed the example provided by DataTables on this page: link.
The code that I used is here: link
And here is how it appears:
How can I fix this?
I tried making the datatables work and I found the issue, you are using a bootstrap css link that conflicts with the one of bootstrap, use these 2 links instead to make the table work.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"/>

Javascript sources conflicting [duplicate]

This question already has an answer here:
Conflict Bootstrap, Prototype Js and Jquery
(1 answer)
Closed 6 years ago.
I am working on a site that uses javascript for a dropdown search list. The site also has a popover. When I put the source below into the header the dropdown search list does not have a search function working, however the popover works, and vis-versa.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
Popover
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Is there a way to make the scripts relate to specific source?
Thanks in advance.
I figured out the issue; the src had to be higher up in the Header. This page helped me: Can I use multiple versions of jQuery on the same page?

Categories