Drawing empty horizontal bars using divs - html

I want to draw 2 divs like the one shown in the below wireframe example. The latter one (black bar) being empty of content. How would I draw these 2 divs using Bootstrap 4?
Following is my effort at this:
<div class="icons_div">
<div class="row">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div> <br> <br>
Following is my re-tried code after Web Dev's Comments:
CSS:
.icon-bar
{
width: 100%;
background-color: black;
overflow: auto;
align-items: center;
}
.icon-bar a
{
float: left;
text-align: center;
width: 20%;
padding: 12px 0;
transition: all;
color: white;
font-size: 36px;
}
.icon-bar a:hover
{
background-color: #000;
}
.active
{
background-color: #4CAF50;
}
.icons_div
{
margin: 0px auto;
width: max-content;
}
.icon
{
margin: 0px auto;
width: 15px;
display: initial;
}
.fa
{
padding: 0px 10px;
}
HTML:
<div class="container-fluid">
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div>
<div class="row">
<div class="col bg-dark" style="height: 40px;"></div>
</div>
</div> <br> <br>
Wireframe of divs
Output from Retry:


In that case, you just add the bg-secondary class to the first row to give it the grey background color and then create a second row-column pair underneath and add the bg-dark to the empty column there as well as style="height: 40px;" to give it the desired height.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div>
<div class="row">
<div class="col bg-dark" style="height: 40px;"></div>
</div>
</div>

Related

Align cards in page using css

I have made 4 cards using css, html and bootstrap 3. For some reason the first row doesn't have the 3 cards that i want but the second is, and they are not aligned perfectly when i zoom in(pixels difference).What can i do? You have an img down below of my 4 unaligned cards.
Here is the code :
HTML:
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div>
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>
CSS:
[![> .front{
margin-top: 30%;
width: 750px;
height:750px;
background-color: #F7F4F2;
align-items: baseline;
margin-left: 20%;
position: relative;
border-radius: 10%;
align-self: flex-start;
}
.girlimg{
max-width: 500px;
min-height: 475px;
border-radius: 10%;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: space-between;
position: absolute;
top:0;
right:0;
margin-left: %;
margin-top: 15%;
font-size: 30px;
}
.duration{
margin-bottom: 25%;
}
.people{
margin-bottom: 25%;
}
.kids{
margin-bottom: 25%;
}
.activname{
display: flex;
flex-direction: row;
margin-left: 7%;
margin-bottom: 5%;
font-size: 45px;
}
.activbutt{
background-color: #ffcc66;
border-radius: 2%;
display: flex;
margin-left: 20%;
font-size: 30px;
padding: 20px;
border: none;
}
Image of my 4 cards:
https://i.stack.imgur.com/6kDFU.png

I removed unwanted margins from your code. Please check this snippet.
.front {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #F7F4F2;
position: relative;
margin-bottom: 15px;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.activname{
font-size: 20px;
}
.activbutt{
background-color: #ffcc66;
text-align: center;
padding: 10px;
border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12"></div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>

Bootstrap row messing up

HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-2"></div>
<div class="col-2 Jumbooptions" id="create" onclick="location.href='#';">
<p class="efr">Create</p>
<i class="fas fa-plus fa-2x" id="ci"></i>
</div>
<div class="col-2 Jumbooptions" id="add" onclick="location.href='#';">
<p class="efr">Add</p>
<i class="fas fa-address-book fa-2x" id="ai"></i>
</div>
<div class="col-2 Jumbooptions" id="stats" onclick="location.href='#';">
<p class="efr">Statistics</p>
<i class="fas fa-chart-pie fa-2x" id="si"></i>
</div>
<div class="col-2 Jumbooptions" id="export" onclick="location.href='#';">
<p class="efr">Export</p>
<i class="fas fa-file-export fa-2x" id="ei"></i>
</div>
</div>
<div class="row" id="bigger">
<div class="col-2" id=""></div>
<div id="created" class="dropdown col-4">
<h2>CREATE</h2>
<p>as many sheets as you want with ease!</p>
</div>
<div id="addd" class="dropdown col-4">
</div>
<div id="statsd" class="dropdown col-4">
</div>
<div id="exportd" class="dropdown col-4">
</div>
</div>
</div>
</div>
CSS
height:70px !important;
width:700px;
margin-left:47px
}
If I make the "height" any more than 70 the rest of the row goes to the start of the jumbotron
When height is less than 70: https://gyazo.com/6601be928cb893b5355c78fbc792e694
When height is more than 70 (200): https://gyazo.com/6b6f96fa6eadcffc6db3dd427cac8d03
I'm really not sure what to do.

Layout CSS & HTML, Alignment Issue

I have this layout of pictures. As you can see the first picture of the first line is not in the same line with the first picture of the second line. It's a bit off... How can I fix it? I need them all to be equally aligned. I have attached the whole code. Please help. I tried margin, padding, display but did not get it right.
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.circle-count {
position: absolute;
right: -5px;
top: -5px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 14px;
background-color: #9b59b6;
}
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 30px 30px 0 0;
border-radius: 15px;
padding: 15px;
display: inline-block;
}
.image-fix {
border-radius: 15px;
width: 200px;
height: 200px;
vertical-align: inherit;
}
.add-photo {
background: #f5e0db;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: bottom;
text-align: center;
text-transform: uppercase;
}
.likes-count {
position: relative;
right: -180px;
top: 18px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 17px;
background-color: #e87193;
}
.add-photo input[type="file"] {
display: none;
}
.add-photo .fa {
color: #e8bcb5;
font-size: 24px;
padding: 15px 0;
}
.add-photo label {
font-weight: bold;
font-size: 14px;
color: #e86d8f;
text-decoration: none;
cursor: pointer;
}
.photo-info-author {
width: 32px;
height: 32px;
border-radius: 50%;
}
.photo-author-name {
padding-right: 3px;
padding-top: 5px;
}
.all-photo-likes {
padding-left: 15px;
padding-top: 8px;
color: #e87193;
}
.all-photo-no-likes{
padding-left: 15px;
padding-top: 8px;
color: #bbbbbb;
}
.second-line-photos{
margin-top: 39px; }
.third-line-photos{
margin-top: 79px;
}
<!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, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/vikids-css.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row photos-container">
<div class="col-md-12">
<div class="photo-element add-photo">
<label>
<input type="file">
<i class="fa fa-plus" aria-hidden="true"></i>
<p>Добавить <br/>фотографию</p>
</label>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="./assets/images/gallery/gallery6.png">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I will appreciate your help. Thanks

I've added comments to the snippet below.
Summary is...
Use position: absolute on your 'like counter'. Add position: relative to its container.
Remove the padding around the image container
Change .add-photo vertical-align to top.
Space the photos using margin (I've increased the top margin to 60px)
update as per comment with regards aligning information under the photo
Given your current layout, you could simply remove the negative left and right margin added to .row. You can also remove the padding-left on the 'likes' item at the end of the row.
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.circle-count {
position: absolute;
right: -5px;
top: -5px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 14px;
background-color: #9b59b6;
}
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 60px 30px 0 0;
/* Increase top margin to space */
border-radius: 15px;
/* padding: 15px; Not needed */
display: inline-block;
position: relative;
/* Needed to position number of likes */
}
.image-fix {
border-radius: 15px;
width: 200px;
height: 200px;
vertical-align: inherit;
}
.add-photo {
background: #f5e0db;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
vertical-align: top;
/* Change from 'bottom' */
}
.likes-count {
position: absolute;
right: 0;
top: 0;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 17px;
background-color: #e87193;
}
.add-photo input[type="file"] {
display: none;
}
.add-photo .fa {
color: #e8bcb5;
font-size: 24px;
padding: 15px 0;
}
.add-photo label {
font-weight: bold;
font-size: 14px;
color: #e86d8f;
text-decoration: none;
cursor: pointer;
}
.photo-info-author {
width: 32px;
height: 32px;
border-radius: 50%;
}
.photo-author-name {
padding-right: 3px;
padding-top: 5px;
}
.all-photo-likes {
/* padding-left: 15px; */
padding-top: 8px;
color: #e87193;
}
.all-photo-no-likes {
/* padding-left: 15px; */
padding-top: 8px;
color: #bbbbbb;
}
.second-line-photos {
margin-top: 39px;
}
.third-line-photos {
margin-top: 79px;
}
.photo-element .row {
margin: 0;
}
<!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, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/vikids-css.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row photos-container">
<div class="col-md-12">
<div class="photo-element add-photo">
<label>
<input type="file">
<i class="fa fa-plus" aria-hidden="true"></i>
<p>Добавить <br/>фотографию</p>
</label>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="./assets/images/gallery/gallery6.png">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Close your first <div class='col-md-12'> and reopen after closing if you want to break...
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.circle-count {
position: absolute;
right: -5px;
top: -5px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 14px;
background-color: #9b59b6;
}
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 30px 30px 0 0;
border-radius: 15px;
padding: 15px;
display: inline-block;
}
.image-fix {
border-radius: 15px;
width: 200px;
height: 200px;
vertical-align: inherit;
}
.add-photo {
background: #f5e0db;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: bottom;
text-align: center;
text-transform: uppercase;
}
.likes-count {
position: relative;
right: -180px;
top: 18px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 17px;
background-color: #e87193;
}
.add-photo input[type="file"] {
display: none;
}
.add-photo .fa {
color: #e8bcb5;
font-size: 24px;
padding: 15px 0;
}
.add-photo label {
font-weight: bold;
font-size: 14px;
color: #e86d8f;
text-decoration: none;
cursor: pointer;
}
.photo-info-author {
width: 32px;
height: 32px;
border-radius: 50%;
}
.photo-author-name {
padding-right: 3px;
padding-top: 5px;
}
.all-photo-likes {
padding-left: 15px;
padding-top: 8px;
color: #e87193;
}
.all-photo-no-likes{
padding-left: 15px;
padding-top: 8px;
color: #bbbbbb;
}
.second-line-photos{
margin-top: 39px; }
.third-line-photos{
margin-top: 79px;
}
<!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, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/vikids-css.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row photos-container">
<div class="col-md-12">
<div class="photo-element add-photo">
<label>
<input type="file">
<i class="fa fa-plus" aria-hidden="true"></i>
<p>Добавить <br/>фотографию</p>
</label>
</div>
</div><!--add this-->
<div class="col-md-12"><!--add this too-->
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="./assets/images/gallery/gallery6.png">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Move icons in the middle of icon-div

I have the following icon-div. What I want is to align the elements in the middle of the div like shown in the wireframe. What shall I do to make this happen.
HTML:
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-search"> </i> </div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-home"> </i> </div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-trash"> </i> </div>
</div>
</div>
</div>
CSS:
.icons_div
{
margin: 0px auto;
width: content;
overflow: visible;
}
.icon
{
margin: 0px auto;
width: 15px;
display: table-cell;
}
.fa
{
padding: 0px 10px;
}
Following are my wireframe and my output respectively:

use bootstraps flexbox: https://getbootstrap.com/docs/4.0/utilities/flex/
with
<div class="d-flex justify-content-around">
<div class="icon"><i class="fa fa-circle"> </i></div>
<div class="icon"><i class="fa fa-globe"> </i> </div>
...
</div>
you can justify them with "margins" left and right
if you want to put this more into the center, you can set a margin on the flex container or around it

column items inside carousel expand when sliding

I have seen this problem other times i worked with bootstrap and it's bugging me. When the carousel cycles the column items expand to the full width of the container ignoring their padding. How could i fix this?
<div id="shop-crsl-1" class="carousel slide shop-crsl hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details"><i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details"><i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details"><i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details"><i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details"><i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details"><i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<div class="controls">
<a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
<a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
</div>
</div>
.shop-crsl {
position: relative;
overflow: hidden;
}
.shop-crsl .controls a {
position: absolute;
top: 50%;
width: 100%;
line-height: 53px;
width: 50px;
border-radius: 2px;
text-align: center;
margin-top: -30px;
font-size: 11px;
height: 50px;
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-ms-transition: all 0.35s ease;
}
.shop-crsl .controls a:hover {
text-decoration: none;
}
.shop-crsl .controls .left {
left: 15px;
position: absolute;
padding-right: 3px;
}
.shop-crsl .controls .right {
right: 15px;
position: absolute;
padding-left: 3px;
}

If you nest your col-sm-4 divs in a <div class="row"> this should fix your issue. See below code:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<!-- You 1st Item -->
</div>
<div class="col-sm-4">
<!-- You 2nd Item -->
</div>
<div class="col-sm-4">
<!-- You 3rd Item -->
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<!-- You 4th Item -->
</div>
<div class="col-sm-4">
<!-- You 5th Item -->
</div>
<div class="col-sm-4">
<!-- You 6th Item -->
</div>
</div>
</div>
</div>
Now I could not duplicate your issue but I have used this method here and having the nested row helps. Let me know if you have any other questions.