I am attempting to integrate Bootstrap with Fullpage.js in order to ensure that my website is responsive. My current layout for Fullpage.js looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the plugin option 'scrollOverflow:true' -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2','#4BBFC3','#7BAABE','whitesmoke'],
css3: true
});
});
</script>
<style type="text/css">
.section{
font-size:6em;
text-align:center;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<div class="section">Sction 2</div>
<div class="section">Sction 3</div>
</div>
</body>
</html>
I then attempted to add Bootstrap jQuery files and CSS files as follows...
At the end of body section:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
At the head section:
<link href="css/bootstrap.css" rel="stylesheet"/>However, whenever I try to do this, it crashes the entire Fullpage.js functionality and it no longer works properly within Bootstrap! Any guidance on how to successfully integrate Bootstrap with Fullpage.js would be greatly appreciated. Thank you!