houdriwiokug houdriwiokug - 3 months ago 146
CSS Question

How to add Bootstrap to Fullpage.js

I'm trying to add Bootstrap to Fullpage.js so in this way my site would be looked responsive. Basically I have got a simple layout for Fullpage.js which goes 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>


Then I tried adding Bootstrap Jquery files and CSS files and called them...

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"/>


But whenever I do this the whole Fullpage.js would be crashed and no longer it works withing Bootstrap! So I don't know how to use Bootstrap with Fullpage.js, if you know how to do that please let me know ,I really appreciate that. ThX

Answer

Try the following code, it should work, just to make sure you use jquery plugin at once and organize it properly.

<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<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>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Comments