image gallery with boostrap

I try to make an responsive image gallery with bootstrap, so that if you make the screen smaller, the images are still in there right dimensions.

I try it like this:

<div id="tabs-2">


    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" />

    <ul class="row">
        @foreach (var item in Model.LolaBikePhotos)
        {

            @model  ContosoUniversity.Models.UserProfile
            <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 /></li>
        }
    </ul>


</div>

But if you make the screen smaller the images are laying over each other.

So how to make this responsive?

Thank you