Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootswatch API Demo</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
  <h1>Bootstrap</h1>
  <div class="alert alert-info">
    <h4>Alert!</h4>
    <p>This is a demo of the Bootswatch API.</p>
  </div>
  <select></select>
</body>
</html>
 
body {
  padding: 2em;
  text-align: center;
}
​
h1 {
  margin-bottom: 1em;
}
​
select {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
}
 
$.get("http://api.bootswatch.com/3/", function (data) {
  var themes = data.themes;
  var select = $("select");
  select.show();
  $(".alert").toggleClass("alert-info alert-success");
  $(".alert h4").text("Success!");
  
  themes.forEach(function(value, index){
    select.append($("<option />")
          .val(index)
          .text(value.name));
  });
  
  select.change(function(){
    var theme = themes[$(this).val()];
    $("link").attr("href", theme.css);
    $("h1").text(theme.name);
  }).change();
​
}, "json").fail(function(){
    $(".alert").toggleClass("alert-info alert-danger");
    $(".alert h4").text("Failure!");
});
Output

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

Dismiss x