Clever Geek Handbook

Bootstrap 3: create a list with text and image aligned left

I would like to create a layout similar to the one in the image

enter image description here

large version .

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

+3


source to share


2 answers


You should study the boot media components , they offer: Abstract object styles for building ... a left- or right-aligned image alongside textual content

.

Here's an example in the JSFiddle to get you started:



<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>
+9


source


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

If anyone is looking for another option, I would try a list box and change the list style to use the image I 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 looks like you posted an image from 7shifts.com . This is the markup they are using 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;
}
+2


source






More articles:


All Articles