Bootstrap boilerplate

by Salmin Skenderovic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button onclick="myAlert();">Click here to alert us!</button>

<div class="alert alert-danger alert-dismissible fade in " role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                 <span aria-hidden="true">&times;</span></button>
          <h4>This is an alert!</h4>
          <p>
                 <button class="btn btn-danger" onclick="danger();" type"button">Danger Action</button>
                 <button class="btn btn-default" onclick="cancel();" type="button">Cancel</button>
          </p>
</div>

<div class="jumbotron">
    
    

                <div class="main container">
                <!--Row with two equal columns-->
                    <div class="row">
                        <div class="col-md-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                        <div class="col-md-6">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a  target="_blank" class="btn btn-success btn-lg">Get started today</a></p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success...

CSS

button {
    margin-bottom: 15px;
}

.alert {
    position: absolute;
    z-index: 999;
}

JavaScript

//Bootstrap template

//INIT
$(".alert").ready(function(){
	var jheight = $(".jumbotron").height();
	var jwidth = $(".jumbotron").width();
	$(".alert").height(jheight);
   	$(".alert").width(jwidth);
});

function myAlert() {
    $(".alert").removeClass("hidden");
}

function danger() {
	alert("you just alerted some danger");
}

function cancel() {
    $(".alert").addClass("hidden");
}