Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 Image sized by column

This would be easy with just CSS, but I can't figure out how to do it using by using Bootstrap.

I want to have an image where the text wraps around it, either floated left or right. However I want it 3 columns wide for md and lg sized screens, and fill the single column for xs and sm sized screens.

So on larger screens, something like this (worst sketch ever right here): enter image description here

Now, I sort of have it working...though it seems to only span 2 columns and I'm not sure why:

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="row">
      <h2>About Them Guys</h2>
      <p class="intro">Home is where you hang your hat.  Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl.</p>

      <div class="col-md-11 col-md-offset-1">

       <p><img src="http://img690.imageshack.us/img690/5169/36ng.png" class="col-md-3 img-responsive pull-left" alt="" />Bacon ipsum dolor sit amet short loin jerky salami sausage, hamburger t-bone doner filet mignon sirloin beef. Tail short ribs jerky leberkas prosciutto pastrami fatback jowl turkey t-bone bacon. Hamburger tail tri-tip, ribeye ham hock leberkas meatball pig short ribs jerky meatloaf. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl. Kevin cow turducken, pancetta fatback swine pig boudin ball tip kielbasa venison. Pig salami capicola chuck pancetta pork.</p>

      </div>
    </div> <!--row-->
  </div> <!--col offset-->
</div> <!--row-->

If that entire paragraph is offset by a column is the image col-md-3 counting that first column offset as "1"? If I use col-md-4 then it does span the 3 columns - wanting to make sure there's something I'm not missing.

Thanks!

like image 747
Gisto Avatar asked Nov 11 '22 13:11

Gisto


1 Answers

This shoud work

<div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div class="row">
          <h2>About Them Guys</h2>
          <p class="intro">Home is where you hang your hat.  Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl.</p>

          <div class="col-md-11 col-sm-12 col-xs-12 col-md-offset-1">

           <p><img src="http://img690.imageshack.us/img690/5169/36ng.png" class="col-md-3 img-responsive pull-left" alt="" />Bacon ipsum dolor sit amet short loin jerky salami sausage, hamburger t-bone doner filet mignon sirloin beef. Tail short ribs jerky leberkas prosciutto pastrami fatback jowl turkey t-bone bacon. Hamburger tail tri-tip, ribeye ham hock leberkas meatball pig short ribs jerky meatloaf. Flank shank bacon, fatback boudin ham tongue beef ribs pig brisket pancetta frankfurter. Jerky pig biltong, chicken hamburger swine corned beef beef ribs beef jowl. Kevin cow turducken, pancetta fatback swine pig boudin ball tip kielbasa venison. Pig salami capicola chuck pancetta pork.</p>

          </div>
        </div> <!--row-->
      </div> <!--col offset-->
    </div>
like image 84
Arun Avatar answered Nov 15 '22 03:11

Arun