img-circle class not rounding up the image

Question

I am using twitter boostrap to make a circular image for user profile.I have added the img-circle class to my img tag.But it is giving me a rectangular image still.How i can solve this problem?

@extends('main')

@section('content')

<h1>This is show.blade.php</h1>

    @if(isset($info))
<div class='container-fluid text-center'>
  <div class='row col-md-5' style='border:1px solid black;'>
    <div class='col-md-2 col-md-offset-2'>
        {!!Html::image('uploads/cat.jpg','',array('class'=>'img-circle','style'=>'width:150px;height:150px;'))!!}
    </div>
    <div class='col-md-12'>
           <span>user id :</span><span>{{$info['info']['id']}}</span></br>
           <span>username :</span><span>{{$info['info']['username']}}</span></br>
    </div>
   </div>
</div>
   @endif
@endsection

Answer 1

Your code is fine and it looks like Bootstrap is not loaded.

Add this to a master template:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

Answer 2

Use this instead:

<img src="{{url('uploads/cat.jpg')}}" class="img-circle" style="width:150px;height:150px;" />

Basically create the element and then just dump the proper path in the src attribute