html - Centered image on top of line in Bootstrap 3 -

html - Centered image on top of line in Bootstrap 3 -

i want create layout:

<div class="row"> <div class="col-md-4 col-sm-4 col-xs-4 line"></div> <div class="col-md-4 col-sm-4 col-xs-4"><img src="http://placepic.me/profiles/160-160" width="160" height="160" class="img-circle"></div> <div class="col-md-4 col-sm-4 col-xs-4 line"></div> </div> .line { width:460px; height:2px; background:#ccc; } .img-circle { border-radius: 50%; }

http://jsfiddle.net/y8kcsr31/

i have out columns in row still doesn't work.

edit: sorry, trying accomplish https://www.dropbox.com/s/bjg2z5wud4yzy4d/screenshot%202014-11-13%2011.49.49.png?dl=0

the op has design pattern this:

using grid scheme accomplish not right way desired result.

since there no design pattern exactly in bootstrap, let's find similar:

.panel

will work. learn more: http://getbootstrap.com/components/#panels

demo: http://jsbin.com/yenade

html clean:

<div class="panel panel-default panel-profile"> <div class="panel-heading text-center clearfix"> <h4>name of person</h4> <img src="http://placepic.me/profiles/50-50" class="img-circle"> <a href="#">edit profile</a> </div> <div class="panel-body"> panel content </div> </div>

css:

.panel-profile .panel-heading { position: relative; } .panel-profile .panel-heading h4 { margin: 10px 0 20px; font-weight: normal; } .panel-profile .panel-heading img { margin: 0 auto 10px; display: block; border: 1px solid #ddd; background: #fff; } @media (min-width:400px) { .panel-profile .panel-heading { font-size: .75em; float: right; } .panel-profile .panel-heading { margin-bottom: 30px; } .panel-profile .panel-heading img { position: absolute; margin: 0; display: inline; bottom: -25px; } }

html css twitter-bootstrap twitter-bootstrap-3