CODEWITHSUNDEEP
htmlimagecssresponsive-designtwitter-bootstrap-3
Dollface1280
Dollface1280

Reputation: 15

Bootstrap 3 -Images and text floated to opposite sides of a responsive column

I looked and haven't found my specific problem. I'm trying to build a responsive webpage, with a lg layout that has 12 images with text below them, a med and a sm layout with text and pics next to each other, and an xs layout with images above text again.

I cannot get the images and the paragraphs to sit beside each other in the column. I've tried push-x, pull-x, offset-x, media queries where I made a div for each .img and .p and made them float.

I'm sure there's an easy way to do it, but this is my first week of Bootstrap, and I can't figure it out. How is this done?

Here's a sample of my code:

    <div class="row">
        <div class="content col-lg-2 col-md-4 col-sm-6 col-xs-12">
          <h2>Fork and Spoon</h2>
          <div class="frame1"><img class="img-responsive" src="./images/spork.jpg" alt="Spork"></div>
          <p>We are the <em>spork of the party!</em>  Yes, we've endured most every cutting remark; just don't refer to my wife as "flatware" and she is happy. </p>
          <p><a class="btn btn-default" href="#">More utensils here &raquo;</a></p>
        </div>

Upvotes: 1

Views: 3536

Answers (1)

Sean Ryan
Sean Ryan

Reputation: 6056

Put a grid inside your larger grid. Code below, working example at http://bootply.com/91851

<div class="row">
  <div class="content col-lg-2 col-md-4 col-sm-6">
    <h2>Fork and Spoon</h2>
    <div class="row">
      <div class="col-lg-12 col-sm-6">
        <img class="img-responsivet" src="./images/spork.jpg" alt="Spork">
      </div>
      <div class="col-lg-12 col-sm-6">
        <p>We are the <em>spork of the party!</em>  Yes, we've endured most every cutting remark; just don't refer to my wife as "flatware" and she is happy. </p>
      </div>
    </div>
    <p><a class="btn btn-default" href="#">More utensils here »</a></p>
  </div>
  ...repeat...
</div><!--/row-->

Also note that you do not need to explicitly set .col-xs-12, as this is the default if you do not set col-xs at all.

Upvotes: 2

Related Questions