<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2>List items</h2> <ul class="media-list main-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s518/colobus.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s400/colobus.jpg" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Colobus</h4> <div class="by-author"> <p id="listitem" class="by-author">Loremi ipsum colobus. kaema kaema leama aemae ekaema meak ekame a ekime i kema em emaem ema ema eaekaem aema kmae meka mea kmea kem lorem tama me.aeak</p> <div> <span style="padding-top:4px" class="clblue glyphicon glyphicon-thumbs-up"></span> <span class="clblue">125</span>    <span class="clred glyphicon glyphicon-thumbs-down"></span> <span class="clred">2</span> </div> <span style="padding-top:4px" class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00 </div> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s518/elephant.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s400/elephant.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Elephant</h4> <div class="by-author"> <p id="listitem" class="by-author">Loremi ipsum colobus. kaema kaema leama aemae ekaema meak ekame a ekime i kema em emaem ema ema eaekaem aema kmae meka mea kmea kem lorem tama me.aeak</p> <div> <span style="padding-top:4px" class="clblue glyphicon glyphicon-thumbs-up"></span> <span class="clblue">125</span>    <span class="clred glyphicon glyphicon-thumbs-down"></span> <span class="clred">2</span> </div> <span style="padding-top:4px" class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00 </div> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s400/ivanovic.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Anna İvanoviç</h4> <div class="by-author"> <p id="listitem" class="by-author">Loremi ipsum colobus. kaema kaema leama aemae ekaema meak ekame a ekime i kema em emaem ema ema eaekaem aema kmae meka mea kmea kem lorem tama me.aeak</p> <div> <span style="padding-top:4px" class="clblue glyphicon glyphicon-thumbs-up"></span> <span class="clblue">125</span>    <span class="clred glyphicon glyphicon-thumbs-down"></span> <span class="clred">2</span> </div> <span style="padding-top:4px" class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00 </div> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s400/lion.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lion</h4> <p class="by-author">Lorem impusm lion</p> <div class="btn-toolbar" style="margin-top:10px;"> <a href="#" class="btn btn-danger btn-lg" style="background-color:#003300;border: 1px solid #030;"> Habere Git <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s518/lizard.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s400/lizard.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lizard</h4> <p class="by-author">Lorem impusm lizard</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s518/squid.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s400/squid.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Squid</h4> <div class="by-author"> <p id="listitem" class="by-author">Loremi ipsum colobus. kaema kaema leama aemae ekaema meak ekame a ekime i kema em emaem ema ema eaekaem aema kmae meka mea kmea kem lorem tama me.aeak</p> <div> <span style="padding-top:4px" class="clblue glyphicon glyphicon-thumbs-up"></span> <span class="clblue">125</span>    <span class="clred glyphicon glyphicon-thumbs-down"></span> <span class="clred">2</span> </div> <span style="padding-top:4px" class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00 </div> </div><!-- media-body --> </li> </ul> </div> </div>

/* image thumbnail */ .thumb { display: block; width: 100%; margin: 0; } /* Main Article [Module] ------------------------------------- * Featured Article Thumbnail * have a image and a text title. */ .featured-article { width: 100%; height: 100%; position: relative; margin-bottom: 1em; } .featured-article .block-title { /* Position & Box Model */ position: absolute; bottom: 0; left: 0; z-index: 1; /* background */ background: rgba(0,0,0,0.7); /* Width/Height */ padding: .5em; width: 100%; /* Text color. */ color: #fff; } .featured-article .block-title h2 { margin: 0; } /* Featured Articles List [BS3] -------------------------------------------- * show the last 3 articles post */ .main-list { padding-left: .5em; } .main-list .media { margin-top: 20px; padding-bottom: 1.1em; border-bottom: 1px solid #e8e8e8; } .main-list .media:first-child { border-top: 1px solid #000; padding-top:15px; } .main-list .media:last-child { border: none; } /* like dislike css*/ .btn-glyphicon { padding:8px; background:#ffffff; margin-right:4px; } .icon-btn { padding: 1px 15px 3px 2px; border-radius:50px; } /* Style to article Author */ .by-author { line-height: 1.0; font-size: 12px; color: #000; padding:0; margin:0; } .clred { color:red; } .clblue { color:blue; } /* list item Restriction. */ #listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }