Q:

адаптивность в bootstrap

<div class="container">
<div class="col-xs-6 col-sm-4">
    <div class="thumbnail">
        <img class="photo_list" src="/new.jpg" width="400"/>
        <div class="caption">
            <h3><span class="badge">new</span>categoryyyy</h3>
            <p>создать новую категорию</p>
            <a href="" class="btn btn-success btn-list" data-toggle="modal" data-target="#modal-new_catgr">создать
                <i class="fa fa-arrow-right"></i></a>
        </div>
    </div>
</div>

как сделать, чтоб текст и кнопка не выходили за рамки при уменьшении окна браузера 

A:

Задайте для .thumbnail атрибут overflow-x: hidden;, тогда элементы внутри не будут вылезать наружу блока.
Но это решение в лоб. Проблема ведь в другом. У вас колонки на мобильном устройстве получаются слишком узкие.
Используйте классы col-sm-6 col-md-4 col-lg-3, тогда на экранах побольше у вас будет по 2-3-4 колонки в ряд, а на мобильных устройствах колонки будут в столбик.

