Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
  <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>
  <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
  
  <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://jsbin.com/etijug">Family</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="http://jsbin.com/etijug">Home</a></li>
              <li><a href="#">About the family</a></li>
              <li><a href="#">more pictures</a></li>
            </ul>
          </div>
        </div>
     </div>
  </div>
   
</head>
<body>
 
<div class="hero-unit">
  <h1>Family</h1>
 <div id="myCarousel" class="carousel slide">
    <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>
      
    </ol>
  
    <div class="carousel-inner">
    <div class="active item">
     
      <img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/562737_10201790223506685_1139624116_n.jpg" alt="">
      
    </div>
    <div class="item">
      
        
      <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn2/1208697_406461169457702_224600628_n.jpg" alt="">
    </div>
    <div class="item">
      
     
      <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/1000562_10201592071953020_1410023997_n.jpg" alt="">
    </div>
  
 
   
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
​
    
      
    </div> 
   </div>
  </div>
  <div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="true" data-send="true">
   </div>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
shazdergafneypro
0viewers