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="welcome">
<div class="container">
<div class="row flex-at-desktop">
<div class="col-sm-6 col-xs-12">
<img src="http://2cousins.designbankdevelopment.co.uk/wp-content/themes/shapely/images/2.jpg" alt="" />
</div>
<div class="col-sm-6 col-xs-12">
<div class="something-semantic">
<div class="something-else-semantic">
<h2>Welcome to 2 Cousins
Powered Access</h2>
<p>We provide a cost effective range of services in relation to mobile elevated working platforms. We have a large range of aerial platforms (scissor and booms) available for hire (Nifty Lift, Genie and Haulotte etc.). We can provide training and assessments if required prior to equipment hire.Training courses are conducted by registered IPAF instructors providing all the certification and information to operate all your equipment.</p>
<p>Whether you need a NiftyLift cherry picker or a Diesel straight stick Telescopic Genie Boom, we have it. Our boom lifts or cherry pickers come in all shapes, sizes and power options. We have Multi-action Jib cherry pickers, Narrow Aisle scissor lifts, Booms, bi energy booms, electric scissor, booms and more.</p>
<p>We offer a free site survey to help select the right machine for you.</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</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');
body {
margin: 10px;
}
.flex-at-desktop {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.something-semantic {
display: table;
width: 100%;
height:100%
}
.something-else-semantic {
-webkit-box-flex: 1;
display: table-cell;
/* text-align: center; */
vertical-align: middle;
background:#ccc
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */