SO

by panchroma

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div class="container">
    <div class="row-fluid pagination-centered">
    <div class="span12 header"><h1>header</h1></div>
    </div>    
  
<div class="row-fluid">
    <div class="span12"><h2 class="price" >£10 </h2><h2 class="info-icon" title="A3 (297x420mm) 160GSM">i</h2>
      </div>
    </div>
    
    <div class="row-fluid pagination-centered">
        <div class="span12 content"><h1>content here</h1>
       
        
        </div>
    </div> 
    
 </div>

CSS

.header{
    background-color:#ddd;
    height:100px;
}

.content{
    background-color:olive;
    height:300px;
}

h2.price{
    display:inline;
    padding-left:50%; /* roughly centre price */
    margin-left:-1em; /* fine-tune price position as req'd */
    margin-right:50px; /* padding to info icon */
    
}
h2.info-icon {
    display:inline;
     
text-align: center;
height: 36px !important;
width: 36px !important;
opacity: 1;
background-color: 
rgba(115,98,110,0.3);
color: 
#fff;
font-size: 14pt;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
-o-border-radius: 18px;
border-radius: 18px;
}