<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="header">
<h3 class="text-muted">Project name</h3>
</div>
<div class="jumbotron">
<h1>Slacker Style Modal</h1>
<p class="lead">Every go to <a href="http://www.slacker.com/">Slacker Radio</a> and think that the modal they use is kidna nice? Wanted to mimic this feature? Now you can.</p>
<p>I tried to make this as easy as possible by making it so you only have to add a class, similar to how bootstap added <code>modal-lg</code> now there is <code>modal-slacker</code>. This means you still have access to bootstraps orginal modals!</p>
<p>Looks best in fullscreen mode. To view this snippet in fullscreen click on the button in the top right hand corner or if you are in fullscreen click on the same button to return to Bootsnipp!</p>
<p>
<button class="btn btn-lg btn-success" data-toggle="modal" data-target=".slacker-modal">Launch Slacker Style Modal</button>
<button class="btn btn-lg btn-info" data-toggle="modal" data-target=".bootstrap-modal">Launch Normal Bootstrap Modal</button>
</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>