<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>

how to make the text and the button do not go beyond when reducing the browser window enter image description here

    2 answers 2

    Set the .thumbnail attribute to overflow-x: hidden; , then the elements inside will not crawl out of the block.

    But this decision in the forehead. The problem is in another. Your mobile device columns are too narrow.

    Use the classes of col-sm-6 col-md-4 col-lg-3 , then on the bigger screens you will have 2-3-4 columns in a row, and on mobile devices the columns will be in a column.

      If it is important to save multiple columns, then you can set the min-width for div.container in CSS.