title: Why bootstrap isn't working in my github webpage?
body: <p>I created a webpage and have it linked to cnd bootstrap extenstion but when I launched the webpage , my layout looks all plain and spread out.
  here is the link to the site </p>
  
  <p>kellito14.github.io</p>
  
  <p>here is the code below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="source/slider.js"&gt;&lt;/script&gt;
    &lt;script src="//connect.soundcloud.com/sdk.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  function myradio(){
  myWindow = window.open("radiopage.php", "_blank", "width=300, height=100");
  
   document.getElementById('radioplayer').pause();
  }
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;!--&lt;body onload="javascript: myradio()" &gt;--&gt;
  &lt;body&gt;
  
  &lt;header&gt;
   &lt;div class="container-fluid"&gt;
    &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
         &lt;img src="" alt="my falcon logo" width="113" height="80"&gt;
    &lt;/div&gt;
        &lt;div class="col-md-4" &gt;
  
    &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
    &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/header&gt;
  &lt;nav class="navbar"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active" id="home"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li &gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="podcast.php"&gt;Podcasts&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="video.php"&gt;Videos&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="subscribe.php"&gt;Subscribe&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;div class="container-fluid"&gt;
  
  
    &lt;div class="col-md-10"&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="images/mfrlogo.jpg" alt="slide1" width="460" height="345" style=" width: 60%;height:400px;"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="images/enactusimg.jpg" alt="slide2" width="460" height="345" style=" width: 60%;height:400px;"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="images/enactusslide.jpg" alt="slide3" width="460" height="345" style=" width: 60%;height:400px;"&gt;
  
  
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;button id="btnslide" class="btn btn-md "&gt;&lt;a href="subscribe.html"&gt;Contribute!&lt;a/&gt;&lt;/button&gt;
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-8"&gt;
          &lt;img src="images/fb.png" alt="facebook icon"&gt;
          &lt;img src="images/tw.png" alt=" twitter icon"&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
     &lt;div class="row-centered" style="padding-left: 5px;"&gt;
      &lt;div class="col-md-2 bg-3" style="min-width: 20%; padding: 5px;"&gt;
        &lt;p&gt; Subscribe to keep up to date on the latests podcasts and videos!&lt;/p&gt;
        &lt;a href="subscribe.html"&gt;&lt;button class="btn btn-color"&gt;Subscribe&lt;/button&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;"&gt;
        &lt;p&gt; The current list of Podcasts!&lt;/p&gt;
        &lt;a href="podcasts.html"&gt;&lt;button class="btn btn-color"&gt;Podcasts&lt;/button&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;"&gt;
        &lt;p&gt; Current Videos &lt;/p&gt;
        &lt;a href="videos.html"&gt;&lt;button class="btn btn-color"&gt;Videos&lt;/button&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;"&gt;
        &lt;p&gt;Learn more about us  &lt;/p&gt;
        &lt;a href="about.html"&gt;&lt;button onclick="myradio()"class="btn btn-color"&gt;About US&lt;/button&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;div class="col-md-2 sidenav" style="overflow:hidden;"&gt;
    &lt;button class="accordion"&gt;Section 1&lt;/button&gt; 
      &lt;div class="panel"&gt;
    &lt;button onclick ="myradio()" class="btn btn-color"&gt;&lt;span class="glyphicon glyphicon-play" aria-hidden="true"&gt;&lt;/span&gt; Live Music&lt;/button&gt;
  &lt;/div&gt;
    &lt;button class="accordion"&gt;Section 2&lt;/button&gt; 
  &lt;div class="panel"&gt;
          &lt;div class="slideCon"&gt;
      &lt;div class= "sD"&gt;&lt;img id= "img1" src="Images/image1.jpg" alt="" width="100" height="100" border="0" /&gt;&lt;/div&gt;
      &lt;div class= "sDTwo"&gt;&lt;img id= "img2" src="Images/image2.jpg" alt="" width="100" height="100" border="0" /&gt;&lt;/div&gt;
      &lt;div class= "sDThree"&gt;&lt;img id ="img3" src="Images/image3.jpg" alt="" width="100" height="100" border="0" /&gt;&lt;/div&gt;
    &lt;/div&gt; 
    &lt;/div&gt;    
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer class="container-fluid bg-4 text-center"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;p&gt;Website created by: Kelly Anaya&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
        &lt;p&gt;Please follow Us:&lt;/p&gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/footer &gt;
  
  &lt;/body&gt;
  &lt;script&gt;
  $('.carousel').carousel({interval: 10000});
  
  &lt;/script&gt;
   &lt;script&gt;window.jQuery || document.write('&lt;script src="../../assets/js/vendor/jquery.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
  
    $(document).ready(function(){
  
    //class of the divs containing slide One, Two, and Three
    var slideOne= $(".sD"), slideTwo= $(".sDTwo"), slideThree= $(".sDThree");
    //ID's of images One, Two, and Three.
    var imgOne = document.getElementById("img1"), imgTwo = document.getElementById("img2"), imgThree = document.getElementById("img3");
  
    var adNum= 0;
    var ImgArray = new Array();
  
  
    for(;adNum&lt;=8; adNum++){
    ImgArray[adNum]= new Image();
    ImgArray[adNum].src= "Images/image"+(adNum+1)+".jpg";
    }
    adNum= 0;
    $(".slideCon").delay(750).toggle();
  
    startSlide();
    function startSlide(){
  
    slideOne.fadeIn(2500);
    slideTwo.fadeIn(2750);
    slideThree.fadeIn(3000);
  
    slideOne.fadeOut(2500);
    slideTwo.fadeOut(2750);
    slideThree.fadeOut(3000);
    setTimeout(function(){imgOne.src=ImgArray[adNum].src;}, 5500);
    setTimeout(function(){imgTwo.src=ImgArray[adNum+1].src;}, 5500);
    setTimeout(function(){ imgThree.src=ImgArray[adNum+2].src;}, 5500);
  
    if(adNum &lt; 6 ){// 9 is number of images
    setTimeout(function(){adNum+=3;}, 5000);
    }//end if
  
    else{
    setTimeout(function(){adNum=0;}, 5000);
    }
    setTimeout(function(){startSlide();}, 6500);
  
    }//end startSlide
    });
  
    &lt;/script&gt;
    &lt;!-- for the accordion--&gt;
    &lt;script type="text/javascript"&gt;
      var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
      acc[i].onclick = function(){
          this.classList.toggle("active");
          this.nextElementSibling.classList.toggle("show");
      }
  }
  
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>