Bootstrap-2.2-ElementsBlock1

by Reusablecode

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<!--  http://bootsnipp.com/snipps/blog-posts-with-picture -->

<div class="row">
    
  <div class="span8">
		<div class="row">
		  <div class="span8">
			<h4><strong><a href="#">Financial Element</a></strong></h4>
		  </div>
		</div>
		  
		<div class="row">
			<div class="input-prepend">
				<span class="add-on">$</span>
				<input class="span2" id="prependedInput" type="text" placeholder="AMEX Totals"/>
			</div>
		</div>
		
		<div class="row">
			<div class="input-append">
				<input class="span2 pull-right" id="appendedInput" type="text" />
				<span class="add-on">new patients</span>
			</div>
		</div>
    </div> <!--/END FINANCIAL-ELEMENT-DIV -->
      
      
    <div class="row">
      <div class="span8">
        <p></p>
        <p>
          <i class="icon-user"></i> by <a href="#">John</a> 
          | <i class="icon-calendar"></i> Sept 16th, 2012
          | <i class="icon-comment"></i> <a href="#">3 Comments</a>
          | <i class="icon-share"></i> <a href="#">39 Shares</a>
          | <i class="icon-tags"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a> 
          <a href="#"><span class="label label-info">Bootstrap</span></a> 
          <a href="#"><span class="label label-info">UI</span></a> 
          <a href="#"><span class="label label-info">growth</span></a>
        </p>
      </div>
    </div>
  </div>
</div>
<hr>

<div class="row">
  <div class="span8">
    <div class="row">
      <div class="span8">
        <h4><strong><a href="#">Title of the post</a></strong></h4>
      </div>
    </div>
    <div class="row">
      <div class="span2">
        <a href="#" class="thumbnail">
            <img...

CSS

.redbox {margin:20px; width:75px;height:75px;outline:2px dashed blue; border:2px solid red; background:hsla(0,100%,50%,0.1);
    border-radius:10px; float:left;}

.redbox.beta {outline-offset:10px;}
.redbox.gamma {outline-offset:-10px;}