CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Nilnoc
Nilnoc

Reputation: 101

Nested Bootstrap columns for list with images?

I've been trying to recreate a list like the one below (the checkbox and the x are just png images) but I can't seem to figure it out. example site

I have tried using two texted cols but I can't for the life of me figure out how to get the alignment and the text breaks correct.

Any help would be very much appreciated.

Right now, my code looks like this:

<div class="row">
        <div class="col-md-6 col-md-6-offset-2">
            <h4 style="text-align: center;">THEY LOVE</h4>
            <div class="row ">
                 <div class="col-xs-1">
                     <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
                     </div>
                <div class="col-xs-11">
                     <p style="padding-top: 8px;">Stuff</p>
                     </div>
           </div>



            </div>

        <div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>

         <div class="row ">
                 <div class="col-xs-1">
                     <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
                     </div>
                <div class="col-xs-10">
                     <p style="padding-top: 8px;">Stuff</p>
                     </div>
           </div>

    </div>

Upvotes: 1

Views: 5164

Answers (2)

Christina
Christina

Reputation: 34652

DEMO: http://jsbin.com/faboze/1/

http://jsbin.com/faboze/1/edit?html,css,output

enter image description here

Look carefully at the html and the css so you can understand how to adjust the spacing and how a hanging indent is done with an un-ordered list. Also look at the grid classes used.

 <div class="container">
     <div class="row">
        <div class="col-sm-offset-2 col-sm-4">
           <h4 class="text-center">THEY LOVE</h4>
           <ul class="list-unstyled love">
              <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
              <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
              <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
              <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
           </ul>
        </div>
        <div class="col-sm-4">
           <h4 class="text-center">THEY DON’T LOVE</h4>
           <ul class="list-unstyled no-love">
              <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
              <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
              <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
              <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
           </ul>
        </div>
     </div>
  </div>

CSS

.list-unstyled.love li, 
.list-unstyled.no-love li {
  background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
  padding:0 0 5% 45px;
}

/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
  background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}

Upvotes: 2

Vishwanath
Vishwanath

Reputation: 6004

You didnt close your tags properly. Check below code.
You can use text-center class from bootstrap for centering the stuff. 

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
    <div class="col-md-6 col-md-6-offset-2">
        <h4>THEY LOVE</h4>
        <div class="row ">
             <div class="col-xs-1">
                 <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
                 </div>
            <div class="col-xs-11">
                 <p style="padding-top: 8px;">Stuff</p>
                 </div>
       </div>
        </div>
    
    <div class="col-md-6"><h4>THEY DON'T LOVE</h4>

     <div class="row ">
             <div class="col-xs-1">
                 <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
                 </div>
            <div class="col-xs-11">
                 <p style="padding-top: 8px;">Stuff</p>
                 </div>
       </div>

</div>

Upvotes: 1

Related Questions