How to make good view with bootstrap and html? - php

Question

I have a little problem.I'm still, learn to program and I don't have very good knowledge.
I'm trying to make view like this:
In this view items are located very evenly.
In my view items are not looking good:
Why i have to repair in my code to look like this online shop view?
My code is here:
<?php foreach($posts as $post) : ?>
<div class="col-xs-12 col-sm-6 col-md-4">
<h3><?php echo $post['title']; ?></h3>
<?php if($this->session->userdata('logged_in')) :?>
<small class="post-date">Posted on: <?php echo $post['created_at']; ?> in <strong><?php echo $post['name']; ?></strong></small>
<?php endif ?>
<div class="zoom-in">
<img class="post-thumb" src="<?php echo site_url(); ?>assets/images/posts/<?php echo $post['post_image']; ?>">
</div>
<?php echo word_limiter($post['body'],10); ?>
<b></b>
<input type="button" class="btn btn-danger addcart" productid="<?php echo $post['id'] ?>" value="Добави в количката">
<p><a class="btn btn-link" href="<?php echo site_url('/posts/'.$post['slug']); ?>">Read more</a></p>
</div>
<?php endforeach; } ?>
Thank you in advance!

Answer 1

resize Image Like this
html, body {
color: #333;
font-size: 16px;
line-height: 20px;
}
body {
margin: 20px;
}
h1 {
line-height: 1.2;
margin-bottom: 35px;
text-align: center;
}
h2 {
text-align: center;
}
img {
height: auto;
max-width: 100%;
}
.image-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto 35px;
max-width: 920px;
}
.svg-image-grid {
clear: both;
margin: 0 auto 35px;
max-width: 920px;
overflow: hidden;
position: relative;
}
/** Screen readers only class from Bootstrap */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
}
/** Actual code examples */
/** Background */
.image-bg {
background-position: center center;
background-size: cover;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5px;
width: calc(25% - 10px);
}
.image-bg-placeholder {
height: 100%;
visibility: hidden;
width: 100%;
}
/** Object-fit */
.image-fit {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5px;
position: relative;
width: calc(25% - 10px);
}
.image-fit-placeholder {
height: 100%;
visibility: hidden;
width: 100%;
}
.image-fit-img {
bottom: 0;
height: 100%;
left: 0;
object-fit: cover;
object-position: center;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
/** Absolute positioning */
.image {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5px;
overflow: hidden;
position: relative;
width: calc(25% - 10px);
}
.image-placeholder {
height: 100%;
visibility: hidden;
width: 100%;
}
.image-img {
left: 50%;
max-height: 150%;
max-width: 177%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/** SVG */
.image-svg {
float: left;
margin: 5px;
padding-bottom: calc(25% - 10px);
position: relative;
width: calc(25% - 10px);
}
.image-svg svg {
bottom: 0;
display: block;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
/** Responsive grid */
#media (max-width: 480px) {
.image,
.image-fit,
.image-bg,
.image-svg {
width: calc(50% - 10px);
}
.image-svg {
padding-bottom: calc(50% - 10px);
}
}
<h1>Techniques to crop and resize images with CSS</h1>
<h2>Image as a background</h2>
<div class="image-grid">
<a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image as a background example" />
</a>
<a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image as a background example" />
</a>
<a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image as a background example" />
</a>
<a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg)" target="_blank">
<img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
<img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image as a background example" />
</a>
</div>