title: How to add Bootstrap to Fullpage.js
body: <p>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:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!-- 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". --&gt;
          &lt;script src="vendors/jquery.easings.min.js"&gt;&lt;/script&gt;
          &lt;!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` --&gt;
          &lt;script type="text/javascript" src="vendors/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.fullPage.js"&gt;&lt;/script&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  $('#fullpage').fullpage({
                      sectionsColor: ['#f2f2f2','#4BBFC3','#7BAABE','whitesmoke'],
                      css3: true
                  });
              });
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
          .section{
              font-size:6em;
              text-align:center;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="fullpage"&gt;
              &lt;div class="section"&gt;Section 1&lt;/div&gt;
              &lt;div class="section"&gt;
                  &lt;div class="slide"&gt;Slide 1&lt;/div&gt;
                  &lt;div class="slide"&gt;Slide 2&lt;/div&gt;
                  &lt;div class="slide"&gt;Slide 3&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="section"&gt;Sction 2&lt;/div&gt;
              &lt;div class="section"&gt;Sction 3&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then I tried adding Bootstrap Jquery files and CSS files and called them...</p>
  
  <p><strong>At the end of body section:</strong></p>
  
  <pre><code>&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>At the head section:</strong></p>
  
  <pre><code>&lt;link href="css/bootstrap.css" rel="stylesheet"/&gt;
  </code></pre>
  
  <p>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</p>