I have a simple div that simulates table with images that would look like and some styling,
I managed to use CSS to fit images into container width (container as browser or another div), but I am really having hard time with height, SO is it possible to make pictures fit width and height that way?
.cabinet {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.module {
display: table-cell;
}
.module button {
border-color: black;
border-style: solid;
border-width: thin;
}
.module img {
width: 100%;
}
<div class="cabinet">
<div class="rack">
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
</div>
<div class="rack">
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
</div>
</div>
I have refactored your code a bit. Removed unnecessary HTML and CSS . See if this is the result you want.
.cabinet {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
img {
width: 100%;
object-fit: cover;
border: 1px solid #000;
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="cabinet">
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
</div>
</body>
</html>
Related
I can't manage to center these divs as I would.
I would like to have all icons aligned vertically and the same for the text in order to have something like that :
The logo picture is a simple <img> tag and the text is a <h4> tag.
If someone is able to help me with this please, I am stuck for a long time on this problem...
Thank you !
Flexbox is great for this sort of thing. You can use align-items:center; to center everything within the flex container vertically and you can use justify-content:center; to center horizontally.
.item {
display:flex;
align-items:center;
justify-content:center;
}
.item-text {
line-height:1rem;
margin-left:10px;
}
<div class="container">
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
<div class="item">
<div class="item-image"><img src="https://via.placeholder.com/50" /></div>
<h4 class="item-text">Lorem Ipsum</h4>
</div>
</div>
Add the previous code, adjust the width from img and h4
.item {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.item-text {
line-height: 1rem;
margin-left: 10px;
}
.item-image {
display: flex;
flex-direction: row-reverse;
width: 30%;
}
h4 {
width: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">Html</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">MongoDB</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">Java</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">C</h4>
</div>
<div class="item">
<div class="item-image">
<img src="https://via.placeholder.com/50" />
</div>
<h4 class="item-text">C++</h4>
</div>
</div>
</body>
</html>
Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
I am using this code to develop HTML code for the image below, but I am overlapping the divs, and stuck with code. I need to develop the solution with the help of divs in HTML.
<div style="width:80%; height: 80px;padding-right:110px;margin-right:40px">
<div style="width:26%; float: left;float:left">
<div class="pointer-blue-small1">Steps & User Requirements Definition</div>
</div>
<div style="width:15%; float: left;">
<div class="pointer-blue-small1">High Level Design</div>
</div>
</div>
<div style="background:rgb(93,188,210);width:500px;height:110px;color:white;line-height:1.2;padding:10px;margin: 5px;">
<div>
<div style="background:rgb(143,63,123);width:390px; height:40px;color:white;text-align:center;line-height:1.2;float:left;padding-left:50px;margin-left:100px">A1901 Integrated Planning</div>
</div>
<br />
<br />
<br />
<div>
<div class="pointer-purple-small" style="width:374px;height:40px;color:white;text-align:center;float:left;padding-left:50px;margin-left:100px;line-height:1.2;display:inline-block">A1102 Update Project Plan</div>
</div>
</div>
<div style="background:rgb(93,188,210);width:500px;height:60px;color:white;line-height:1.2;padding:10px;margin: 15px;display:inline-block;margin-left:6px">
<div style="background:rgb(143,63,123);width:390px; height:40px;color:white;text-align:center;line-height:1.2;float:left;padding-left:50px;margin-left:100px">A1919 Change Request Control & Monitor and Report Risks and Issues</div>
</div>
<div style="background:rgb(93,188,210);width:500px;height:175px; color:white;line-height:1.2;padding:10px;margin: 5px;" ;display: inline-block;margin-left:35px">
<div>
<div style="background:rgb(143,63,123);width:390px; height:40px;color:white;text-align:center;line-height:1.2;float:left;padding-left:50px;margin-left:100px">A1105 Quality Assurance </div>
</div>
<br />
<br />
<br />
<div>
<div style="background:rgb(143,63,123);width:390px;height:40px;color:white;text-align:center;float:left;padding-left:50px;margin-left:100px;line-height:1.2;display:inline-block">A1922 StackHolder Management</div>
</div>
<br />
<br />
<br />
<div>
<div class="pointer-purple-small" style="width:374px;height:40px;color:white;text-align:center;flo[![enter image description here][1]][1]at:left;padding-left:50px;margin-left:100px;line-height:1.2;display:inline-block">A1104 Update Quality Plan</div>
</div>
</div>
</div>
.left-parent div {
width: 40%;
height: 50px;
}
.row {
justify-content: space-between;
}
.left-parent {
justify-content: space-between;
}
.border {
border: 1px solid;
}
.flex {
display: flex
}
.left,
.right {
width: 50%;
margin: 10px
}
.child {
height: 50px;
margin-top: 20px;
}
<div class="row flex ">
<div class="left">
<div class="flex left-parent">
<div class="border left-parent-child">
</div>
<div class="border left-parent-child">
</div>
</div>
<div class="border child">
</div>
<div class="border child">
</div>
<div class="border child">
</div>
</div>
<div class="right border">
</div>
</div>
I'm trying to make circular images on a page but I wanted them to be the same size and try to keep the aspect ratio. Since they are different sizes, it looks horrible. I wanted to make them look like the yellow guy image.
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: auto;
height: 200px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
border-radius: 50%;
}
.person:hover {
opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<p><strong>Counter-Strike</strong></p>
<br />
<a href="">
<img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
</a>
</div>
<div class="col-sm-4">
<p><strong>Rainbow 6: Siege</strong></p>
<br />
<img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>FIFA</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><strong>League of Legends</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Racing</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Battlefield</strong></p>
<br />
<img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
</div>
</div>
</div>
you might need to apply height:auto and max-width: 100%; to you img
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: auto;
height: 200px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
border-radius: 50%;
}
.person:hover {
opacity: 1;
}
.myrow img{
height:auto;
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row myrow">
<div class="col-sm-4">
<p><strong>Counter-Strike</strong></p><br />
<a href=#Url.Action( "PC", "Gaming")>
<img class="person" src="https://baconmockup.com/300/200/" />
</a>
</div>
<div class="col-sm-4">
<p><strong>Rainbow 6: Siege</strong></p><br />
<img class="img-circle person" src="https://baconmockup.com/300/200/" />
</div>
<div class="col-sm-4">
<p><strong>FIFA</strong></p><br />
<img class="person" src="https://baconmockup.com/300/200/" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><strong>League of Legends</strong></p><br />
<img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
</div>
<div class="col-sm-4">
<p><strong>Racing</strong></p><br />
<img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
</div>
<div class="col-sm-4">
<p><strong>Battlefield</strong></p><br />
<img class="person" src="https://i.ytimg.com/vi/zrwRmR6MKeg/maxresdefault.jpg" />
</div>
</div>
</div>
If you want to keep your image in an img tag, you can use the object-fit property to force the image to adapt to its container. You might also need a polyfill for browser support, I suggest the lazysizes plugin.
You might also define your images with a background-image (directly set in a style attribute, so it can be managed from the view...) and use the more supported background-size property. Some lazyload plugins (see http://jquery.eisbehr.de/lazy/example_load-background-images for instance) offer this approach with a data-src attribute.
In both case the cover value seems, as you suggested, the right value to use with object-fit or background-size.
You can add max-width: 100% and max-height: 200px for your images to preserve aspect ratio but take not more than 200px or height. Demo:
.person {
border: 10px solid transparent;
margin-bottom: 25px;
max-width: 100%;
max-height: 200px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.7;
border-radius: 50%;
}
.person:hover {
opacity: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center list">
<div class="row">
<div class="col-sm-4">
<p><strong>Counter-Strike</strong></p>
<br />
<a href="">
<img class="person" src="http://i.imgur.com/Zckhfao.jpg" />
</a>
</div>
<div class="col-sm-4">
<p><strong>Rainbow 6: Siege</strong></p>
<br />
<img class="img-circle person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>FIFA</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><strong>League of Legends</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Racing</strong></p>
<br />
<img class="person" src="http://i.imgur.com/Dho2UVH.png" />
</div>
<div class="col-sm-4">
<p><strong>Battlefield</strong></p>
<br />
<img class="person" src="http://i.imgur.com/bFg40Dj.jpg" />
</div>
</div>
</div>
I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row
I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>
I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>