Twitter Bootstrap Question posted in

Why bootstrap isn't working in my github webpage? – Twitter bootstrap

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

kellito14.github.io

here is the code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="source/slider.js"></script>
  <script src="//connect.soundcloud.com/sdk.js"></script>


<script type="text/javascript">

function myradio(){
myWindow = window.open("radiopage.php", "_blank", "width=300, height=100");

 document.getElementById('radioplayer').pause();
}


</script>

</head>
<!--<body onload="javascript: myradio()" >-->
<body>

<header>
 <div class="container-fluid">
  <div class="container">
  <div class="row">
    <div class="col-md-4">
       <img src="" alt="my falcon logo" width="113" height="80">
  </div>
      <div class="col-md-4" >

  </div>
      <div class="col-md-4">
  </div>
  </div>
 </div>
</header>
<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
    <li class="active" id="home"><a href="index.html">Home</a></li>
      <li ><a href="about.php">About</a></li>
      <li><a href="podcast.php">Podcasts</a></li> 
      <li><a href="video.php">Videos</a></li> 
            <li><a href="subscribe.php">Subscribe</a></li> 
    </ul>
  </div>
</nav>


<div class="container-fluid">


  <div class="col-md-10">
<div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/mfrlogo.jpg" alt="slide1" width="460" height="345" style=" width: 60%;height:400px;">
      </div>

      <div class="item">
        <img src="images/enactusimg.jpg" alt="slide2" width="460" height="345" style=" width: 60%;height:400px;">
      </div>

      <div class="item">
        <img src="images/enactusslide.jpg" alt="slide3" width="460" height="345" style=" width: 60%;height:400px;">


      </div>
    </div>
<button id="btnslide" class="btn btn-md "><a href="subscribe.html">Contribute!<a/></button>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div class="row">
    <div class="col-md-8">
        <img src="images/fb.png" alt="facebook icon">
        <img src="images/tw.png" alt=" twitter icon">
      </div>

  </div>
   <div class="row-centered" style="padding-left: 5px;">
    <div class="col-md-2 bg-3" style="min-width: 20%; padding: 5px;">
      <p> Subscribe to keep up to date on the latests podcasts and videos!</p>
      <a href="subscribe.html"><button class="btn btn-color">Subscribe</button></a>
    </div>
    <div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;">
      <p> The current list of Podcasts!</p>
      <a href="podcasts.html"><button class="btn btn-color">Podcasts</button></a>
    </div>
    <div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;">
      <p> Current Videos </p>
      <a href="videos.html"><button class="btn btn-color">Videos</button></a>
    </div>
    <div class="col-md-2 bg-3" style="min-width: 20%;padding: 5px;">
      <p>Learn more about us  </p>
      <a href="about.html"><button onclick="myradio()"class="btn btn-color">About US</button></a>
    </div>
  </div>

  </div>

<div class="col-md-2 sidenav" style="overflow:hidden;">
  <button class="accordion">Section 1</button> 
    <div class="panel">
  <button onclick ="myradio()" class="btn btn-color"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Live Music</button>
</div>
  <button class="accordion">Section 2</button> 
<div class="panel">
        <div class="slideCon">
    <div class= "sD"><img id= "img1" src="Images/image1.jpg" alt="" width="100" height="100" border="0" /></div>
    <div class= "sDTwo"><img id= "img2" src="Images/image2.jpg" alt="" width="100" height="100" border="0" /></div>
    <div class= "sDThree"><img id ="img3" src="Images/image3.jpg" alt="" width="100" height="100" border="0" /></div>
  </div> 
  </div>    

    </div>
  </div>
</div>
<footer class="container-fluid bg-4 text-center">
<div class="row">
    <div class="col-md-4">
      <p>Website created by: Kelly Anaya</p>
    </div>
  </div>
  <div class="row">
      <div class="col-md-4">
      <p>Please follow Us:</p>

      </div>

  </div>
</footer >

</body>
<script>
$('.carousel').carousel({interval: 10000});

</script>
 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
 <script type="text/javascript">

  $(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<=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 < 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
  });

  </script>
  <!-- for the accordion-->
  <script type="text/javascript">
    var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

  </script>
</html>
Tags:

2

Answers


  1. 0

    This is the error message you get,

    (index):7 Mixed Content: The page at 'https://kellito14.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.
(index):1 Mixed Content: The page at 'https://kellito14.github.io/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.

    So the problem is mixed content, one way to solve this is change the links to https, 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    or if you are not sure about http/https, then just have it like this:

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    The browser will automatically decide whether to load it over http or https.

    Login or Signup to reply.
  2. 0

    Your bootstrap cdn should be https not http, here is the link from bootstrap’s official website for css

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    Here is the link for the js

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    Notice the https.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search