Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<section class="triangle-section">
    	
    	<div class="triangle-down"></div>
         <!--<div class="container-fluid">
      
           <div class="row">
                <div class="col-md-4 col-md-offset-8 text-center">
                    <h2 class="section-heading">We've got what you need!</h2>
                    <h3>December 5, 2016</h2>
                    <hr class="light">
                    <p>Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Bootstrap are open source, free to download, and easy to use. No strings attached!</p>
                    <a href="#" class="btn btn-default btn-xl">Get Started!</a>
                </div>
            </div>
        </div>-->
        
        <div class="triangle-content">
        	<div class="triangle-content-inner">
        	 		<h2 class="section-heading">We've got what you need!</h2>
                    <h3>December 5, 2016</h2>
                    <hr class="light">
                    <p>Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Bootstrap are open source, free to download, and easy to use. No strings attached!</p>
                    <a href="#" class="btn btn-default btn-xl">Get Started!</a>
        
        	</div>
        </div>
        
    </section>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
section {
  position: relative
}

.triangle-section {
  background: url(http://placekitten.com/900/500) center center no-repeat;
  background-size: cover;
  overflow: hidden;
}

.triangle-content {
  position: relative;
  margin-right: 40px;
  text-align: center;
  float: right;
  width: 550px;
  padding: 30px 100px 100px
}

.triangle-down {
  width: 100%;
  position: absolute;
  top: 0;
  right: -140px;
}

.triangle-down:after {
  content: "";
  border-style: solid;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: -450px;
  border-width: 550px 450px 0 450px;
  border-color: red transparent transparent transparent;
}

@media (max-width:767px) {
  .triangle-down {
    background: red;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
  }
  .triangle-down:after {
    margin: 0;
    border: none;
  }
  .triangle-content {width:100%;margin:0 auto}
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */