How to add Bootstrap to Fullpage.js


Tags: jquery,css,twitter-bootstrap,responsive-design,fullpage.js

Problem :

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



Solution :

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>

    CSS Howto..

    jQuery, how can i do to toggle a margin

    How can I center this textbox using CSS?

    How to load CSS using jquery

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to call multiple classes of CSS in a single class?

    In how many ways and places we can place comment in CSS?

    How to Make a Banner Image?

    How to add css styles on aria-hidden attribute

    How to format f.submit with css, glyphicons, and symbol?

    Animate Chartist on show

    How do I make numbered paragraphs (HTML5/CSS3)

    CSS: how do I position my slideshow counter up into the slideshow

    How to adjust height based on content css

    How to use vertical align in bootstrap

    How to create a dynamically sized form background with CSS?

    Does anyone know how to create this 3d flip animation via CSS?

    How do I prevent a JQuery UI menu from floating?

    How do I fit custom size icons into jQuery UI buttons?

    How to do like this list using
  • and CSS?
  • How to create arrows (with 3 lines) in CSS?

    How to change button CSS attributes

    How to not apply a css block?

    How can I get the post text to be beside the avatar and not below it?

    How to make centered fixed width body responsive?

    How can I place two DIVs inside a horizontal fixed header and make all the content vertically align?

    How to make the page load scrolled down to
    when loaded?

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How can I make a display:flex container expand horizontally with its wrapped contents?

    how to install bootstrap-select on server

    How to write css for specific div selection like before after