Nested Bootstrap columns for list with images?

Question

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>

This uses different grid classes to get a better result: jsbin.com/faboze/2 EDIT LINK: jsbin.com/faboze/2/edit?html,css — Christina
– Christina, Commented Nov 1, 2014 at 19:28

Community · Accepted Answer · 2020-06-20 09:12:55Z

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;
}

Vishwanath · Accepted Answer · 2014-11-01 18:11:20Z

1

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>

edited Nov 1, 2014 at 18:11

answered Nov 1, 2014 at 18:00

Vishwanath

6,0146 gold badges40 silver badges59 bronze badges

1 Comment

Nilnoc Over a year ago

That's so helpful. Do you have any idea how I can center the two columns inside of span6? I would like to have them in the middle of the page, similar to the image I posted.

Collectives™ on Stack Overflow

Nested Bootstrap columns for list with images?

2 Answers 2

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

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

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

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related