CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayouticons
Andy C
Andy C

Reputation: 71

Bootstrap 3: Create list with text and image left aligned

I'd like to create a layout like the one in the image

enter image description here

large version.

What is the best and cleanest way create the layout in HTML and the cleanest way to call it in the CSS? for example, should I create a div for each icon? This what I have tried so far: cssdeck.com/labs/full/vqnsgldc

Upvotes: 4

Views: 45792

Answers (2)

Anuj
Anuj

Reputation: 1474

You should look into using bootstrap media components they offer: Abstract object styles for building ... a left- or right-aligned image alongside textual content.

Here's an example in JSFiddle to start you off:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2MDkzNzUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg==" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 11

surfmuggle
surfmuggle

Reputation: 5942

As Anuj already answered the bootstrap media components offer: Abstract object styles for building ... a left- or right-aligned image alongside textual content

If someone is looking for another option i would try a list and change the list-style-image to use the image you would like to show

<ul>
  <li>one</li>
  <li class="star">two</li>
  <li class="fo">Three</li>
</ul>

and this css

.foo { vertical-align: top; list-style-image: url(.foo.png...); }
.star { vertical-align: top; list-style-image: url(..star.png..); }

It seems that the image you posted is from 7shifts.com. This is the markup they use and their approach looks similar.

<ul class="large-icon-list clearfix">    
     <li class="icon-list-sheets">
         <div class="icon-list-image"></div>
         <div class="icon-list-content">
             <h4>Title on the right from the image</h4>
             <p>Text on the right from the image</p>
         </div>
         <div class="clear"></div>
     </li>

     <li class="icon-list-locations">
          .... same as above
     </li>

     <li class="icon-list-group-connect">
          .... same as above
     </li>
</ul>

And this css

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix { *zoom: 1;}

.large-icon-list {
    margin-top: 5em; border-bottom: 1px solid #eee;
    margin-left: 8.54701%; margin-right: 8.54701%;
}

.large-icon-list li {
    min-height: 170px; width: 48.71795%;
    float: left; margin-right: 2.5641%;
    display: inline;
}

/* one class-rule for each image - here sheets */
.large-icon-list li.icon-list-sheets .icon-list-image {
  background: url("../icon-sheets.png?14....9") 
  no-repeat top center;
}

.large-icon-list li .icon-list-image {
  height: 100px; width: 23.07692%;
  float: left; margin-right: 2.5641%;
  display: inline;
}

.large-icon-list li .icon-list-content {
  width: 74.35897%; float: right;
  margin-right: 0; *margin-left: -30px;
  display: inline;
}

Upvotes: 2

Related Questions