Edit on
<div class="container">

    <div class="row">

        <div class="col-lg-12 page-header"><h1 id="header">Leaflet.js</h1></div>
        <div class="row-fluid">
            <div class="col-lg-8">

                <div id="map"></div>

            </div>
        </div>

    </div>

</div>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
body{
  padding:0; margin:0;
  background:#232323;
}

#map {
  width:800px;
  height:400px;
}

.row {
  width:800px;
  margin:auto;
}

.container {
  color:white;
  width:90%;
  height:90%;
  padding:50px;
}
$(window).ready(function() {
  
  var map = L.map('map'); 
  
  L.tileLayer('//{s}.tile.cloudmade.com/41339be4c5064686b781a5a00678de62/998/256/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

  var marker0 = L.marker([41.9425622, -87.6979302]).addTo(map); marker0.bindPopup("Hot Dougs"); 
  var marker1 = L.marker([41.498282, -87.84796]).addTo(map); marker1.bindPopup("Museum");
  var marker2 = L.marker([41.5437472, -87.6786466]).addTo(map); marker2.bindPopup("Library"); 
  var marker3 = L.marker([41.561708, -87.667423]).addTo(map); marker3.bindPopup("Twisted Q");
  
  var group = new L.featureGroup([marker0, marker1, marker2, marker3]);
  
  map.fitBounds(group.getBounds()); 
});
Rerun