html - specifying images in twitter bootstrap -
i trying experiment twitter-bootstrap example
http://twitter.github.io/bootstrap/examples/carousel.html
if go page, see there 3 light circles 140x140 written in it.
i trying have image in circle..
the following relevant code
<div class="span4"> <img class="img-circle" data-src="holder.js/140x140"> <h2>foobar</h2> <p>elaborate</p> <p><a class="btn" href="#">view details »</a></p> </div><!-- /.span4 -->
how can achieve that?
thanks.
it uses border-radius
style. image square image, border-radius
style trims corners make circle.
.img-circle { -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; }
i'd recommend not load image though. can same thing div this:
html
<div class="img-circle"></div>
css
.img-circle { background:#555; width: 140px; height: 140px; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; }
Comments
Post a Comment