is it possible to use bootstrap together with MDBootstrap? - html

I Have been using Bootstrap for many years, and it is been 9 days now that I am working on a project in which I used bootstrap CDN, the problem is I need some features, components of MDBootstrap but not all of it, and when I included MDBootstrap also, it conflicted with the bootstrap cdn, my buttons and all the components I used are now confused, some of my components corrupted, what is the solution? I will write down my CDNs I have used.
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap"
/>
<!-- MDBootstrap CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
/>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
and these are all what I have at last of the body tag.
<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.js"></script>
<!-- FontAwesome CDN -->
<script
src="https://kit.fontawesome.com/d455f30832.js"
crossorigin="anonymous"
></script>
<!-- Bootstrap js -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
any solution would be really appreciated.
please consider upvoting my question that I need for reputation. Thanks

As per bootstrap support team: Import only our package. With this package you'll be able to youse both: mdb, and standard bootstrap.
Reference: https://mdbootstrap.com/support/standard/can-i-use-bootstrap-with-mdbootstrap-can-i-use-bootstrap-and-mdbootstrap-together/

Related

Bootstrap carousel not working locally, but works with online link

So I am working on a website for a school project and am using bootstrap. I downloaded bootstrap js e css files so I could use locally, so even if I don't have internet connection bootstrap would still work.
Everything was working fine, no problem with bootstrap, until I used a carousel.For some reason, my carousel wouldn't work, only the first image would appear. It didn't matter what i changed, nothing would work.
Then I tried changing the bootstrap files to the online links on the bootstrap website, and to my surprise, the carousel started working!
So why does the carousel only work with online bootstrap link and not local bootstrap files?
Below are the bootstrap files, locally and the web link. I am not providing the carousel html code because that is not the problem, seeing as i took it from the bootstrap website, and it is working, just not locally.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--<link href="css/style.css" rel="stylesheet" type="text/css">-->
<!-- Boostrap Minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Plugin jQuery -->
<!--<script src="js/jquery-3.4.1.slim.min"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If anyone has had the same problem and nows how to solve it, i would apreciate it!
Thank you!
I suspect your calls failed because you did not call bootstrap.bundle.min.js (w/ Popper.js). You called the unbundled version (bootstrap.min.js) which does not include popper.js.
This is discussed in https://getbootstrap.com/docs/4.4/getting-started/contents/#css-files

Why does my html import tag not work?

I have been looking at code reusability (for example) and have been experimenting with HTML import tags. I want to auto include my bootstrap code in every webpage and would like to do it with one line of code as opposed to multiple.
After doing some research online, the answer seemed to be to use the tag, most namely the following format:
<head>
<import rel="import" href="includes/bootstrap.html">
</head>
My bootstrap.html file is just some normal bootstrap links as follows:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm simply trying to avoid importing the same three lines across all my pages. However, my browser (Chrome) does not seem to implement include in any way, even when I use for reasons other than Bootstrap.
How should I properly include my bootstrap files across the head of all my pages?
Alex
Change import tag to link tag
<head>
<link rel="import" href="includes/bootstrap.html">
</head>
Refer this
How about creating a header file 'header.php' with the links like so,
<head>
<title>Your Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
And when you write your code just include the header.php part.
<html>
<? include ("header.php");?>
</html>

Converting Html Template to Thymeleaf Template

I am trying to convert my html5 template for my spring project. In this project i use thymeleaf template. In order to convert, i changed all scripts src into th:src or all style files (css files to) th:href etc. But design seems wrong.
<script th:src="#{/resources/js/jquery.min.js}" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Fonts -->
<link th:href="#{http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700}" rel='stylesheet' type='text/css'/>
<link th:href="#{http://fonts.googleapis.com/css?family=Pacifico}" href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link th:href="#{/resources/font-awesome/css/font-awesome.css}" href='font-awesome/css/font-awesome.css' rel="stylesheet" type="text/css"/>
<!-- Bootstrap -->
<link th:href="#{/resources/bootstrap/css/bootstrap.min.css}" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main Style -->
<link rel="stylesheet" th:href="#{/resources/style.css}" href="style.css" />
<!-- owl Style -->
<link rel="stylesheet" th:href="#{/resources/css/owl.carousel.css}" href="css/owl.carousel.css" />
<link rel="stylesheet" th:href="#{/resources/css/owl.transitions.css}" href="css/owl.transitions.css" />
<!-- rating -->
<script th:src="#{/resources/js/rate/jquery.raty.js}" src="js/rate/jquery.raty.js"></script>
<script th:src="#{/resources/js/labs.js}" src="js/labs.js" type="text/javascript"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" th:src="#{/resources/js/product/lib/jquery.mousewheel-3.0.6.pack.js}" src="js/product/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- fancybox -->
<script type="text/javascript" th:src="#{/resources/js/product/jquery.fancybox.js?v=2.1.5}" src="js/product/jquery.fancybox.js?v=2.1.5"></script>
<!-- custom js -->
<script th:src="#{/resources/js/shop.js}" src="js/shop.js"></script>
These are the converted tags. And also when i execute my page i get the exception shown below. This image is not exist in my bootstrap/img folder also it is not exist in template folder as well. But template seems to work without Thymeleaf.
jquery.fancybox.js?v=2.1.5:1994 GET http://localhost:8080/resources/bootstrap/img/glyphicons-halflings.png 404 (Not Found)
For those resources with "http://" prefix, no need to use th:href.
For those inner-site resources, "/resources/bootstrap/img/glyphicons-halflings.png", please remove "/resources", Spring Framework will append it by default.
Below is from Spring document for your reference.
By default Spring will serve static content from a directory called /static (or /public or /
resources or /META-INF/resources) in the classpath or from the root of the ServletContext.
It uses the ResourceHttpRequestHandler from Spring MVC so you can modify that behavior by
adding your own WebMvcConfigurerAdapter and overriding the addResourceHandlers method.

how can I use boostrap with dreamweaver?

I'm new to this HTML CSS stuff and I like it. A few days ago I stumbled upon Bootstrap, and I liked it. How can I use it with dreamweaver ?
you can add the bootstrap files to your source (if you want to edit the bootstrap docs this is recomended) or just use the online-versions and apply the tags in the head part of your html document.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and with this it should run no matter what IDE you use.
/S

How many bootstrap links do I need to use at the top of my index.html file to use a template

I am trying to use a bootswatch Bootstrap template that you can find here: http://www.bootstrapcdn.com/#bootswatch_tab (The template is Amelia).
Do I only add this to my index.html document:
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">
or do I need to add these two as well to make it work:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
I figured I just needed the first piece of code but I need it to connect to my style.css document.
For Bootstrap, you need only these by default :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Depending on the theme, which you want to use, you will have to go through the source code to check what other external files have been used for layout(css) and visible effects(.js) for it
go through src and you'll find a url for amelia :
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">