gimana supaya thumbnail bootstrap rapi

gimana caranya supaya thumbnail bootstrap ini rapi ya gan ?? thumbnail ke 1 sampe 4 normal tapi mulai thumbnail ke 5 dst berantakan gan gak bisa di sampingnya malah jadi dibawahnya :( gimana cara ngatasinnya gan?

ini kode ane

 <?php
require_once "init.php";
require_once "view/header.php";

$super_user = $login = false;

if($_SESSION['user']){
  $login = true;
  if(cek_status($_SESSION['user']) == 1){
    $super_user = true;
  }
}

$articles = tampilkan();
if(isset($_GET['cari'])){
  $cari     = $_GET['cari'];
  $articles = hasil_cari($cari);

}
 ?>

<div class="container">
  <div class="jumbotron">
  <h1>Selamat Datang di JarKom!</h1>
  <p>Selamat Datang di situs JarKom ! Sebuah website artikel sederhana. Disini kalian bisa melihat
    artikel tentang perkembangan teknologi, Tips & trik seputar teknologi, dsb.</p>
  <a href="selengkapnya.php" class="btn btn-success btn-lg" role="button"> Lihat Selengkapnya </a>
</div>

<br>

<form class="navbar-form navbar-right pencarian" role="search" method="get">
  <div class="form-group">
      <input type="search" class="form-control" placeholder="Cari disini gan!" name="cari">
  </div>
  <button type="submit" class="btn btn-primary">Cari</button>
  <br>
  <a href="index.php">Muat Ulang</a>
</form>

<br><br><br><br>

 <?php
 $blog = mysqli_query($link, "SELECT * FROM blog");
 while($row= mysqli_fetch_assoc($articles)):
   ?>
   <div class="table-row-equal">
           <div class="col-md-4 col-sm-6">
           <div class="thumbnail">
        <img class="img-responsive zoom" src="upload/<?php echo $row['gambar']; ?>">
            <div class="caption">
           <h3><?= $row['judul']; ?></h3>

          <div id="menu_thumb">
            <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
           <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
           <?php if($login == true): ?>
           <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
           <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
         <?php endif; ?>
           <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
         </div>
       </div>
       </div>
     </div>
   </div><!--akhir thumbnail row-->
<?php endwhile; ?>
</div>

<style media="screen">
  .container{
    padding-bottom: 20px;
  }
</style>

<?php
require_once "view/footer.php"
?>

mohon dibantu gan soalnya ane dah ngulik sana sini tetep aja gak berhasil :(

avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Diperbarui 4 tahun yang lalu

16 Jawaban:

Ukuran gambar mu ditentuin dulu mass...

misal: width:100%; height:200px;

 <img class="img-responsive zoom" src="upload/<?php echo $row['gambar']; ?>"  style="width:100%; height:200px;">
avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

udah gan di css nya filenya ane pisah

 @media only screen and (min-width : 420px){
	.table-row-equal {
		display: inline;
		width: 100%;
		table-layout: fixed;
		word-wrap: break-word;
		border-spacing: 5px 5px;
	}
	.table-row-equal .thumbnail {
		float: none;
		display: table-cell;
		width: 1%;
		box-shadow: 10px 10px 10px #c6c6c6;
	}
}
avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Lahh kan itu bukan untuk gambar nya gan.. nama class gambar nya kan "img-responsive" dan "zoom"

avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

Coba dulu deh yang aku buat tadi...

 <img class="img-responsive zoom" src="upload/<?php echo $row['gambar']; ?>"  style="width:100%; height:200px;">
avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

oiyaa :v ,eh ini dah bisa gan ane pake cara agan jadi naik satu gini thumbnailnya tapi yang paling kiri tetep gak mau naik gan :(

avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Gambar2 agan punya lebar tinggi yang berbeda2, jadi harus disamaain dulu tinggi dan lebar nya gan..

avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

cara nyamainnya gimana gan ???

avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Nahh ituu, pasti ada kesalahan lain lagi, coba saya cari tahu lagi..

avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

Klau tinggi dan lebar udah sama gan pake cara yang saya buat tadi..

avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

gak bisa gan, udah ane coba dengan gambar yang sama persis tetep aja masih dibawah begini

avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Bisa kok gann...

Coba lihat lebih teliti lagi gan..

avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

loh kok bisa ya gan apa ada faktor lain ya gan di file css nya ini

 *{
	margin:0;
	padding:0;
}

@media only screen and (min-width : 420px){
	.table-row-equal {
		display: inline;
		width: 100%;
		table-layout: fixed;
		word-wrap: break-word;
		border-spacing: 5px 5px;
	}
	.table-row-equal .thumbnail {
		float: none;
		display: table-cell;
		width: 1%;
		box-shadow: 10px 10px 10px #c6c6c6;
	}
}

.pencarian{
	float: right;
	margin-right: 0px;
}
.kategori{
	width: 100%;
	display: inline;
	font-family: sans-serif;
	text-shadow: 2px 2px #b1aaaa;
}

/* ini adalah navbar style */
.Home{
	border-bottom: thick solid #64df83;
	text-shadow: 2px 2px #616161;
}

.Komputer{
	border-bottom: thick solid #41e4e4;
	text-shadow: 2px 2px #616161;
}

.TechNews{
	border-bottom: thick solid #f042e9;
	text-shadow: 2px 2px 1px #616161;
}
.Tips{
	border-bottom: thick solid #fff352;
	text-shadow: 2px 2px 2px #616161;
}
.Tambah{
	border-bottom: thick solid #fa3939;
	text-shadow: 2px 2px 2px #616161;
}
.Login{
	border-bottom: thick solid #ffdf37;
	text-shadow: 2px 2px #616161;
}
.Logout{
	border-bottom: thick solid #7e74ed;
	text-shadow: 2px 2px #616161;
}
.jarkom{
	text-shadow: 2px 2px #616161;
}

/* footer strip */

.footer{
	border-top: thick solid #77ed74;
}

/* animasi */
.zoom{
	margin-left: auto;
	margin-right: auto;
}
.zoom:hover{
	transform: scale(1.08);
	transition: 0.5s ease;
}

@media screen and (max-width:700px) {
	#copyright{
			bottom: 0;
	    width: 100%;
	    position: relative;
	    height:50px;
	    line-height:50px;
	    background:#3c3a3a;
	    color:#fff;
	    padding-left: 10px;
	  }

	#withlove{
		display: none;
	}

	.menufooter{
		display: none;
	}

}

#withlove{
  float: right;
  padding-right: 10px;
}
#copyright{
		bottom: 0;
    width: 100%;
    position: relative;
    height:50px;
    line-height:50px;
    background:#3c3a3a;
    color:#fff;
    padding-left: 10px;
  }

#judul_single{
  font-size: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

#tag_single{
  font-style: italic;
}
#kontainer{
	min-height: 100%;
}

avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu



<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <body>

    <div class="container">
  <div class="jumbotron">
  <h1>Selamat Datang di JarKom!</h1>
  <p>Selamat Datang di situs JarKom ! Sebuah website artikel sederhana. Disini kalian bisa melihat
    artikel tentang perkembangan teknologi, Tips & trik seputar teknologi, dsb.</p>
  <a href="selengkapnya.php" class="btn btn-success btn-lg" role="button"> Lihat Selengkapnya </a>
</div>

<br>

<form class="navbar-form navbar-right pencarian" role="search" method="get">
  <div class="form-group">
      <input type="search" class="form-control" placeholder="Cari disini gan!" name="cari">
  </div>
  <button type="submit" class="btn btn-primary">Cari</button>
  <br>
  <a href="index.php">Muat Ulang</a>
</form>

<br><br><br><br>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="Artikel Cover.JPG" style="width:100%; height:200px;">
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="9.jpg" style="width:100%; height:200px;" >
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="Artikel Cover.JPG" style="width:100%; height:200px;">
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="9.jpg" style="width:100%; height:200px;" >
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="Artikel Cover.JPG" style="width:100%; height:200px;">
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="9.jpg" style="width:100%; height:200px;" >
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="Artikel Cover.JPG" style="width:100%; height:200px;">
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="9.jpg" style="width:100%; height:200px;" >
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="Artikel Cover.JPG" style="width:100%; height:200px;">
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="9.jpg" style="width:100%; height:200px;" >
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="Artikel Cover.JPG" style="width:100%; height:200px;">
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-row-equal">
      <div class="col-md-4 col-sm-6">
        <div class="thumbnail">
          <img class="img-responsive zoom" src="9.jpg" style="width:100%; height:200px;" >
          <div class="caption">
            <h3><?= $row['judul']; ?></h3>

            <div id="menu_thumb">
              <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
              <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
              <?php if($login == true): ?>
                <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
                <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
              <?php endif; ?>
              <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <style media="screen">
    @media only screen and (min-width : 420px){
    	.table-row-equal {
    		display: inline;
    		width: 100%;
    		table-layout: fixed;
    		word-wrap: break-word;
    		border-spacing: 5px 5px;
    	}
    	.table-row-equal .thumbnail {
    		float: none;
    		display: table-cell;
    		width: 1%;
    		box-shadow: 10px 10px 10px #c6c6c6;
    	}
    }
    </style>

  </body>
</html>


avatar dodipsitorus
@dodipsitorus

412 Kontribusi 145 Poin

Dipost 7 tahun yang lalu

padahal ane dah sama

 <div class="table-row-equal">
           <div class="col-md-4 col-sm-6">
           <div class="thumbnail">
        <img class="img-responsive zoom" src="upload/<?php echo $row['gambar']; ?>" style="width:100%; height:200px;">
            <div class="caption">
           <h3><?= $row['judul']; ?></h3>

          <div id="menu_thumb">
            <p class="waktu"> <span class="glyphicon glyphicon-time" aria-hidden="true"> : </span> <?= $row['waktu']; ?> </p>
           <p class="tag"> <span class="glyphicon glyphicon-tags" aria-hidden="true"> : </span> <?= $row['tag']; ?> </p>
           <?php if($login == true): ?>
           <a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
           <a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
         <?php endif; ?>
           <a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca artikel </a>
         </div>
       </div>
       </div>
     </div>
   </div><!--akhir thumbnail row-->
avatar Dagimal
@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

https://codepen.io/JacobLett/pen/oZmWdd

mungkin yg seperti itu yg dicari.

avatar yoviefesya
@yoviefesya

1 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

Share website / share di codepen aja source yang bisa di liat

avatar meatlover
@meatlover

22 Kontribusi 5 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban