html - Bootstrap 3: Create list with text and image left aligned -


i'd create layout 1 in image

enter image description here

large version.

what best , cleanest way create layout in html , cleanest way call in css? example, should create div each icon? have tried far: cssdeck.com/labs/full/vqnsgldc

you should using bootstrap media components offer: abstract object styles building ... left- or right-aligned image alongside textual content.

here's example in jsfiddle start 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>

Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more