Tell me how to make text wrapping text using a bootstrap mesh? For the picture I use the img-responsive class.

  • use classes - pull-right or pull-left - soledar10
  • Tried, does not help. - Alexander
  • What wrap? An example of the desired result can provide? - V. Rotenberh
  • It is necessary that the picture was pressed to the right wall, and the text flowed around it to the left. But the picture must be responsive. Everything in the container. - Alexander
  • jsfiddle.net/5cvs9ye6 - soledar10

1 answer 1

The img-responsive class sets:

 display: block; max-width: 100%; height: auto;

And the pull-right class interrupts the value for float :

 float: right !important;

To change the size of the picture, we will give it a width in percent. And let's adjust the image to occupy the entire width of the column on a narrow screen. Check what happened:

 .width-40-pct { width: 100%; } @media (min-width: 768px) { .width-40-pct { max-width: 40%; width: 40%; } } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-xs-8"> <img src="http://placehold.it/600x200" class="img-responsive pull-right width-40-pct" alt="" /> <div class="alert alert-danger visible-xs"> Картинка прижмется к правому краю, когда экран станет шире 767 пикселей. </div> <p> слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова слова </p> </div> <div class="col-xs-4"> новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости новости </div> </div> </div>