Text of the adaptive image Bootstrap



  • Can you tell me how to make a picture of the text using the boutstrap grid? Use img-responsive for the picture.



  • Class img-responsive Makes:

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

    A class pull-right overtakes value float:

    float: right !important;
    

    To change the size of the picture, give it the width through the percentages. And we're gonna build a picture on the narrow screen that takes the whole edge of the column. Check it out:

    .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="" />

      &lt;div class="alert alert-danger visible-xs"&gt;
        Картинка прижмется к правому краю, когда экран станет шире 767 пикселей.
      &lt;/div&gt;
      
      &lt;p&gt;   слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      слова слова слова слова слова слова слова слова слова слова слова слова
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4"&gt;
      новости новости новости новости новости новости новости новости новости
      новости новости новости новости новости новости новости новости новости
      новости новости новости новости новости новости новости новости новости
      новости новости новости новости новости новости новости новости новости
    &lt;/div&gt;
    

    </div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2