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 &raquo;</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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -