Bootstrap carousel template does not load correctly when loading in Eventbrite event list

Question

I am using a basic bootstrap carousel template's (http://getbootstrap.com/examples/carousel/) and when I use the Event list script code from this page: http://developer.eventbrite.com/doc/widgets/#list, like this:

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src="https://evbdn.eventbrite.com/s3-s3/static/js/platform/Eventbrite.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  Eventbrite({'app_key': "P47XBRPQTVS7YF64Z5"}, function(eb){
    eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
      document.write(eb.utils.eventList( response, eb.utils.eventListRow ));
    });
  });
});
</script>

I, of course, am using my app key and ID and it pulls the information but my bootstrap template loads then goes completely white and shows just the events. I tried using the Google API script 1.7.1 and the Bootstrap 1.11.1 but both give the same result. Also noticing that that the loading of the page never really is stopping, it keeps circling. Has anyone else experienced this?