Skip to content

Instantly share code, notes, and snippets.

@taeo
Created August 14, 2013 22:41
Show Gist options
  • Save taeo/6236411 to your computer and use it in GitHub Desktop.
Save taeo/6236411 to your computer and use it in GitHub Desktop.
Boiler Plate HTML - copy and paste guide for element styling
<h1>Primary Headline (h1)</h1>
<p class="lead">I'm a lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh neque, rhoncus vel pretium at, ornare ac metus. Nullam in aliquam metus. Nulla non arcu dignissim urna convallis semper rhoncus at felis. Suspendisse nec quam sem. Etiam scelerisque tristique tellus, ac auctor velit hendrerit commodo.</p>
<p>I'm a standard paragraph with <a href="#">default link style</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh neque, rhoncus vel pretium at, ornare ac metus. Nullam in aliquam metus. Nulla non arcu dignissim urna convallis semper rhoncus at felis. Suspendisse nec quam sem. Etiam scelerisque tristique tellus, ac auctor velit hendrerit commodo.</p>
<h2>Headline 2 <small>w/ divider below</small></h2>
<div class="divider"></div>
<div class="row-fluid">
<div class="span4">
<h3>Unordered List (h3)</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="span4">
<h3>Ordered List (h3)</h3>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>
</div>
<div class="span4">
<h3>Blockquote (h3)</h3>
<blockquote>
<p>"Vivamus mattis tellus nec quam semper volutpat. Ut a turpis sit amet ligula tincidunt tempor sed et est. Vestibulum ac nunc tincidunt, lacinia dolor sed, dictum arcu."</p>
</blockquote>
</div>
</div>
<div class="divider"></div>
<h5>Headline 5</h5>
<blockquote class="pull-right">
<p>"Right Pull Quotes are oh so sexy. Everyone loves them."</p>
<cite>Bobby Burden</cite>
</blockquote>
<p>I'm a standard paragraph with... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh neque, rhoncus vel pretium at, ornare ac metus. Nullam in aliquam metus. Nulla non arcu dignissim urna convallis semper rhoncus at felis. Suspendisse nec quam sem. Etiam scelerisque tristique tellus, ac auctor velit hendrerit commodo.</p>
<p>I'm a standard paragraph with... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh neque, rhoncus vel pretium at, ornare ac metus. Nullam in aliquam metus. Nulla non arcu dignissim urna convallis semper rhoncus at felis. Suspendisse nec quam sem. Etiam scelerisque tristique tellus, ac auctor velit hendrerit commodo.</p>
<h6>Headline 6</h6>
<blockquote class="pull-left">
<p>"Left Pull Quotes are oh so sexy. Everyone loves them."</p>
<cite>Matt Bain</cite>
</blockquote>
<p>I'm a standard paragraph with... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh neque, rhoncus vel pretium at, ornare ac metus. Nullam in aliquam metus. Nulla non arcu dignissim urna convallis semper rhoncus at felis. Suspendisse nec quam sem. Etiam scelerisque tristique tellus, ac auctor velit hendrerit commodo.</p>
<p>I'm a standard paragraph with... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh neque, rhoncus vel pretium at, ornare ac metus. Nullam in aliquam metus. Nulla non arcu dignissim urna convallis semper rhoncus at felis. Suspendisse nec quam sem. Etiam scelerisque tristique tellus, ac auctor velit hendrerit commodo.</p>
<div class="divider"></div>
<h4>Headline 4 <small>w/ form elements below</small></h4>
<form>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<label>Label textarea</label>
<textarea rows="3"></textarea>
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment