API tools faq
paste
Sebuahhobi98

kolom image with 100% height auto

Sebuahhobi98
Jan 21st, 2020
284
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.19 KB | None | 0 0
raw download clone embed print report
  1. <div class="row">
  2. <div class="col-sm-6 col-md-6">
  3. <div class="thumbnail">
  4. <img src="http://localhost/asrama/assets/images/berita/sebuahhobi_thumb.png" style="width: 100%; height:auto;"> <div align="right">
  5. <span class="label label-success"><i class="fa fa-tag"></i> Teknologi</span>
  6. <span class="label label-warning"><i class="fa fa-user"></i> Sevuahhobi</span>
  7. <span class="label label-info"><i class="fa fa-clock-o"></i> 2018-12-27 07:04:55</span>
  8. </div>
  9. <div class="caption">
  10. <h4><a href="http://localhost/asrama/berita/read/sebuahhobi ">Sebuahhobi</a></h4>
  11. <p><strong>sxsxsxsxxxxxxxxxxxxxxxxxxxxxxxxxxxx</strong></p> </div>
  12. <p align="right">
  13. <a href="http://localhost/asrama/berita/read/sebuahhobi ">
  14. <button type="button" class="btn-sm btn-primary">
  15. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  16. </button>
  17. </a>
  18. </p>
  19. </div>
  20. </div>
  21. <div class="col-sm-6 col-md-6">
  22. <div class="thumbnail">
  23. <img src="http://localhost/asrama/assets/images/no_image_thumb.png" style="width: 100%; height:auto;"> <div align="right">
  24. <span class="label label-success"><i class="fa fa-tag"></i> Ekonomi</span>
  25. <span class="label label-warning"><i class="fa fa-user"></i> XXX</span>
  26. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-15 09:50:19</span>
  27. </div>
  28. <div class="caption">
  29. <h4><a href="http://localhost/asrama/berita/read/percobaan-insert-berita ">Percobaan Insert Berita</a></h4>
  30. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis neque dolor, eu laoreet felis euismod et. Suspendisse in tellus eu erat placerat… </div>
  31. <p align="right">
  32. <a href="http://localhost/asrama/berita/read/percobaan-insert-berita ">
  33. <button type="button" class="btn-sm btn-primary">
  34. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  35. </button>
  36. </a>
  37. </p>
  38. </div>
  39. </div>
  40. <div class="col-sm-6 col-md-6">
  41. <div class="thumbnail">
  42. <img src="http://localhost/asrama/assets/images/berita/berhasil-membuat-berita-via-ci_thumb.png" style="width: 100%; height:auto;"> <div align="right">
  43. <span class="label label-success"><i class="fa fa-tag"></i> Budaya</span>
  44. <span class="label label-warning"><i class="fa fa-user"></i> aio</span>
  45. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-12 05:50:08</span>
  46. </div>
  47. <div class="caption">
  48. <h4><a href="http://localhost/asrama/berita/read/berhasil-membuat-berita-via-ci ">Berhasil Membuat Berita via CI</a></h4>
  49. <p>Nulla vestibulum purus magna, at imperdiet ex maximus ut. Suspendisse porta eget ante vitae scelerisque. Nunc nec nulla accumsan tortor blandit molestie.… </p></div>
  50. <p align="right">
  51. <a href="http://localhost/asrama/berita/read/berhasil-membuat-berita-via-ci ">
  52. <button type="button" class="btn-sm btn-primary">
  53. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  54. </button>
  55. </a>
  56. </p>
  57. </div>
  58. </div>
  59. <div class="col-sm-6 col-md-6">
  60. <div class="thumbnail">
  61. <img src="http://localhost/asrama/assets/images/berita/ada-ayam-bisa-terbang_thumb.jpg" style="width: 100%; height:auto;"> <div align="right">
  62. <span class="label label-success"><i class="fa fa-tag"></i> Politik</span>
  63. <span class="label label-warning"><i class="fa fa-user"></i> popi</span>
  64. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-12 05:49:01</span>
  65. </div>
  66. <div class="caption">
  67. <h4><a href="http://localhost/asrama/berita/read/ada-ayam-bisa-terbang-tinggi ">Ada Ayam Bisa Terbang Tinggi</a></h4>
  68. <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam consequat molestie metus, at posuere elit. Praesent feugiat… </p></div>
  69. <p align="right">
  70. <a href="http://localhost/asrama/berita/read/ada-ayam-bisa-terbang-tinggi ">
  71. <button type="button" class="btn-sm btn-primary">
  72. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  73. </button>
  74. </a>
  75. </p>
  76. </div>
  77. </div>
  78. <div class="col-sm-6 col-md-6">
  79. <div class="thumbnail">
  80. <img src="http://localhost/asrama/assets/images/berita/coba-buat-berita-baru-bro_thumb.jpg" style="width: 100%; height:auto;"> <div align="right">
  81. <span class="label label-success"><i class="fa fa-tag"></i> Teknologi</span>
  82. <span class="label label-warning"><i class="fa fa-user"></i> doni</span>
  83. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-12 05:48:01</span>
  84. </div>
  85. <div class="caption">
  86. <h4><a href="http://localhost/asrama/berita/read/coba-buat-berita-baru-bro ">Coba Buat Berita Baru Bro</a></h4>
  87. <p>Sed libero lorem, fringilla et nisi eu, aliquam molestie lectus. Quisque mattis leo vitae metus aliquam vulputate. Vivamus ullamcorper molestie neque,… </p></div>
  88. <p align="right">
  89. <a href="http://localhost/asrama/berita/read/coba-buat-berita-baru-bro ">
  90. <button type="button" class="btn-sm btn-primary">
  91. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  92. </button>
  93. </a>
  94. </p>
  95. </div>
  96. </div>
  97. <div class="col-sm-6 col-md-6">
  98. <div class="thumbnail">
  99. <img src="http://localhost/asrama/assets/images/berita/ayo-kita-coba-lagi_thumb.jpg" style="width: 100%; height:auto;"> <div align="right">
  100. <span class="label label-success"><i class="fa fa-tag"></i> Olahraga</span>
  101. <span class="label label-warning"><i class="fa fa-user"></i> XXX</span>
  102. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-12 05:47:21</span>
  103. </div>
  104. <div class="caption">
  105. <h4><a href="http://localhost/asrama/berita/read/ayo-kita-coba-lagi ">Ayo Kita Coba Lagi</a></h4>
  106. <p>Morbi eget dui placerat, vehicula metus vel, vehicula ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.… </p></div>
  107. <p align="right">
  108. <a href="http://localhost/asrama/berita/read/ayo-kita-coba-lagi ">
  109. <button type="button" class="btn-sm btn-primary">
  110. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  111. </button>
  112. </a>
  113. </p>
  114. </div>
  115. </div>
  116. <div class="col-sm-6 col-md-6">
  117. <div class="thumbnail">
  118. <img src="http://localhost/asrama/assets/images/berita/where-can-i-get-some_thumb.jpg" style="width: 100%; height:auto;"> <div align="right">
  119. <span class="label label-success"><i class="fa fa-tag"></i> Olahraga</span>
  120. <span class="label label-warning"><i class="fa fa-user"></i> xxx</span>
  121. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-10 20:55:16</span>
  122. </div>
  123. <div class="caption">
  124. <h4><a href="http://localhost/asrama/berita/read/where-can-i-get-some ">Where can I get some?</a></h4>
  125. <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised… </p></div>
  126. <p align="right">
  127. <a href="http://localhost/asrama/berita/read/where-can-i-get-some ">
  128. <button type="button" class="btn-sm btn-primary">
  129. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  130. </button>
  131. </a>
  132. </p>
  133. </div>
  134. </div>
  135. <div class="col-sm-6 col-md-6">
  136. <div class="thumbnail">
  137. <img src="http://localhost/asrama/assets/images/berita/why-do-we-use-it_thumb.jpg" style="width: 100%; height:auto;"> <div align="right">
  138. <span class="label label-success"><i class="fa fa-tag"></i> Ekonomi</span>
  139. <span class="label label-warning"><i class="fa fa-user"></i> susan</span>
  140. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-10 20:54:33</span>
  141. </div>
  142. <div class="caption">
  143. <h4><a href="http://localhost/asrama/berita/read/why-do-we-use-it ">Why do we use it?</a></h4>
  144. <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem… </p></div>
  145. <p align="right">
  146. <a href="http://localhost/asrama/berita/read/why-do-we-use-it ">
  147. <button type="button" class="btn-sm btn-primary">
  148. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  149. </button>
  150. </a>
  151. </p>
  152. </div>
  153. </div>
  154. <div class="col-sm-6 col-md-6">
  155. <div class="thumbnail">
  156. <img src="http://localhost/asrama/assets/images/berita/where-does-it-come-from_thumb.jpg" style="width: 100%; height:auto;"> <div align="right">
  157. <span class="label label-success"><i class="fa fa-tag"></i> Budaya</span>
  158. <span class="label label-warning"><i class="fa fa-user"></i> </span>
  159. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-10 20:53:29</span>
  160. </div>
  161. <div class="caption">
  162. <h4><a href="http://localhost/asrama/berita/read/where-does-it-come-from ">Where does it come from?</a></h4>
  163. <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over… </p></div>
  164. <p align="right">
  165. <a href="http://localhost/asrama/berita/read/where-does-it-come-from ">
  166. <button type="button" class="btn-sm btn-primary">
  167. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  168. </button>
  169. </a>
  170. </p>
  171. </div>
  172. </div>
  173. <div class="col-sm-6 col-md-6">
  174. <div class="thumbnail">
  175. <img src="http://localhost/asrama/assets/images/berita/what-is-lorem-ipsum_thumb.png" style="width: 100%; height:auto;"> <div align="right">
  176. <span class="label label-success"><i class="fa fa-tag"></i> Budaya</span>
  177. <span class="label label-warning"><i class="fa fa-user"></i> abcd</span>
  178. <span class="label label-info"><i class="fa fa-clock-o"></i> 2016-11-10 20:52:05</span>
  179. </div>
  180. <div class="caption">
  181. <h4><a href="http://localhost/asrama/berita/read/what-is-lorem-ipsum ">What is Lorem Ipsum?</a></h4>
  182. <p><strong>Lorem Ipsum</strong><span>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy… </span></p></div>
  183. <p align="right">
  184. <a href="http://localhost/asrama/berita/read/what-is-lorem-ipsum ">
  185. <button type="button" class="btn-sm btn-primary">
  186. Selengkapnya <i class="fa fa-arrow-circle-right"></i>
  187. </button>
  188. </a>
  189. </p>
  190. </div>
  191. </div>
  192.  
  193. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!