Layout CSS & HTML, Alignment Issue

Layout CSS & HTML, Alignment Issue - html

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>

Related

How can I get this code to show fontawesome icons?

I am trying to create some service icon boxes next to the services that are provided. I have tried it in this method however it does not work. I think font-awesome icons could work with this code but I don't know much about font-awesome. The HTML and CSS have been included and you will see that the icons are not being shown.
<style>.y-us-section {
padding: 82px 0 82px;
}
.y-us-head {
text-align: center;
margin: 0 0 91px;
}
.y-us-title h2 {
color: #000;
font-size: 30px;
letter-spacing: 0;
line-height: 32px;
text-transform: uppercase;
margin-bottom: 6px;
}
.y-us-title>p {
color: #777777;
line-height: 22px;
}
.y-us-title-border {
background: #006600 none repeat scroll 0 0;
border-radius: 2px;
display: inline-block;
height: 3px;
position: relative;
width: 50px;
}
.service-3 .service-box {
margin-bottom: 18px;
}
.service-3 .service-box .iconset {
float: left;
text-align: center;
width: 25%;
}
.service-3 .service-box .iconset i {
color: #000;
font-size: 44px;
}
.service-3 .service-box .y-us-content {
float: left;
width: 75%;
}
service-3 .service-box .y-us-content h4 {
color: #3a3a3a;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 14px 0 12px;
text-transform: uppercase;
}
.service-3 .service-box .y-us-content p {
color: #777777;
font-size: 13px;
font-weight: 300;
line-height: 24px;
}
.icon {
color: #70AD4;
padding: 0px;
font-size: 40px;
border: 1px solid #70AD47;
border-radius: 100px;
color: #000000;
font-size: 28px;
height: 70px;
line-height: 70px;
text-align: center;
width: 70px;
}
<body>
<div class="y-us-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="y-us-head">
<div class="y-us-title">
</div>
</div>
</div>
</div>
<div style="clear: both">
<h3 style="float: left">Quality Assurance</h3>
<h3 style="float: right">Regulatory Affairs</h3>
</div>
<hr />
<br>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-content">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Quality Management Representative system</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Iso 13485 Implementation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Internal Audits</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Suppiler Audits</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>CE Marking Files</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UKCA Marking</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>PRRC</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Biological Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Clinical Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>EU Authorised Representative</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UK Responsible Person</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You seem to have exactly the right idea but Glyphicons are nothing to do with Font-Awesome.
Ensure that this line is added to the <head> of your page.
<script src="https://kit.fontawesome.com/d38a9ab6aa.js" crossorigin="anonymous"></script>
Then you can insert any icon from this page....
https://fontawesome.com/v5.15/icons ... In the same way you added the Glyphicons.

To have a small footprint (fast loading time), you may specify only icons you require.
------ Setup ------
-- Create folder 'webfonts' with subfolder 'font-awesome'
-- Copy 4 Font Awesome files (see below) in subforlder 'font-awesome'
-- Create a new file 'fontloader.css' in folder 'webfonts'
[webfonts]
+-- [font-awesome]
| +-- fa-solid-900.svg
| +-- fa-solid-900.ttf
| +-- fa-solid-900.woff
| +-- fa-solid-900.woff2
+-- fontloader.css
-- Insert the following css into file 'fontloader.css'
/* Font Awesome 5 Free */
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url("../webfonts/font-awesome/fa-solid-900.woff2") format("woff2"),
url("../webfonts/font-awesome/fa-solid-900.woff") format("woff"),
url("../webfonts/font-awesome/fa-solid-900.ttf") format("truetype"),
url("../webfonts/font-awesome/fa-solid-900.svg#fontawesome") format("svg");
}
.fas, .far, .fab, .fa {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-style: normal;
font-variant: normal;
font-size: 1em;
line-height: 1;
text-rendering: auto;
}
-- Link the css to your html:
<link rel="stylesheet" href="URL/TO/webfonts/fontloader.css">
------ For each icon ------
-- Use https://fontawesome.com/icons/ to search icons.
/* Example: an 'house' icon, search it */
/* then use the hex code in this way */
.fa-house-user:before {
content: "\e065"
}
-- Now you can insert the icon into the html
<i class="fas fa-house-user"></i>

I hope this solution will help you. The format is not nice, but I kept your HTML as you provided and made the icons to show up.
<style>.y-us-section {
padding: 82px 0 82px;
}
.y-us-head {
text-align: center;
margin: 0 0 91px;
}
.y-us-title h2 {
color: #000;
font-size: 30px;
letter-spacing: 0;
line-height: 32px;
text-transform: uppercase;
margin-bottom: 6px;
}
.y-us-title>p {
color: #777777;
line-height: 22px;
}
.y-us-title-border {
background: #006600 none repeat scroll 0 0;
border-radius: 2px;
display: inline-block;
height: 3px;
position: relative;
width: 50px;
}
.service-3 .service-box {
margin-bottom: 18px;
}
.service-3 .service-box .iconset {
float: left;
text-align: center;
width: 25%;
}
.service-3 .service-box .iconset i {
color: #000;
font-size: 44px;
}
.service-3 .service-box .y-us-content {
float: left;
width: 75%;
}
service-3 .service-box .y-us-content h4 {
color: #3a3a3a;
font-size: 18px;
letter-spacing: 0;
line-height: 22px;
margin: 14px 0 12px;
text-transform: uppercase;
}
.service-3 .service-box .y-us-content p {
color: #777777;
font-size: 13px;
font-weight: 300;
line-height: 24px;
}
.icon {
color: #70AD4;
padding: 0px;
font-size: 20px;
border-radius: 100px;
color: #000000;
font-size: 28px;
height: 20px;
line-height: 20px;
text-align: center;
width: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="y-us-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="y-us-head">
<div class="y-us-title">
</div>
</div>
</div>
</div>
<div style="clear: both">
<h3 style="float: left">Quality Assurance</h3>
<h3 style="float: right">Regulatory Affairs</h3>
</div>
<hr />
<br>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-content">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Quality Management Representative system</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Iso 13485 Implementation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Internal Audits</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Suppiler Audits</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>CE Marking Files</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UKCA Marking</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>PRRC</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Biological Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Clinical Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>EU Authorised Representative</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="fa fa-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UK Responsible Person</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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>

Drawing empty horizontal bars using divs

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>

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

Bootstrap columns contents

Hello I've created a simple columns using bootstrap but there are problem that if the content of the first column is big the third column will be floated in the right:
#contact-me {
width: 100%;
padding: 40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested {
width: 100%;
margin-bottom: 20px;
text-align: center;
}
#contact-me .contact-info-nested i {
display: inline-block;
margin-bottom: 16px;
font-size: 50px;
}
#contact-me .contact-info h4 {
padding: 5px;
font-size: 16px;
line-height: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="clearfix"> </div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>
Note: please run code snippet in fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
#contact-me {
width: 100%;
padding: 40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested {
width: 100%;
margin-bottom: 20px;
text-align: center;
}
#contact-me .contact-info-nested i {
display: inline-block;
margin-bottom: 16px;
font-size: 50px;
}
#contact-me .contact-info h4 {
padding: 5px;
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-sm-4">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="col-sm-4">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Use col-lg-4 . Because col-lg-6 use in thee time and bootstrap column 12 then your last div below line . So i suggest to you can use col-lg-4 three in row then manage all column.
Bootstrap Grid
#contact-me {
width:100%;
padding:40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested{
width:100%;
margin-bottom:20px;
text-align:center;
}
#contact-me .contact-info-nested i{
display:inline-block;
margin-bottom:16px;
font-size:50px;
}
#contact-me .contact-info h4{
padding:5px;
font-size:16px;
line-height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-lg-4">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="clear"></div>
<div class="col-lg-4">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>

User row when you want to add content in new float you need to use class=row. it will helpfull for this type of issue.
#contact-me {
width:100%;
padding:40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested{
width:100%;
margin-bottom:20px;
text-align:center;
}
#contact-me .contact-info-nested i{
display:inline-block;
margin-bottom:16px;
font-size:50px;
}
#contact-me .contact-info h4{
padding:5px;
font-size:16px;
line-height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-lg-6">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
</div>
<div class="row">
<div class="clear"></div>
<div class="col-lg-6">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>

you can use this code <div class="clearfix visible-sm"></div> that this code will clear the float in the small screen:
#contact-me {
width:100%;
padding:40px 0;
/*font-family:Raleway, Arial, 'Open Sans';*/
}
#contact-me .contact-info-nested{
width:100%;
margin-bottom:20px;
text-align:center;
}
#contact-me .contact-info-nested i{
display:inline-block;
margin-bottom:16px;
font-size:50px;
}
#contact-me .contact-info h4{
padding:5px;
font-size:16px;
line-height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact-me">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-map-marker"></i>
<h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-phone"></i>
<h4>+93 345 678 91 23</h4>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-4 col-sm-6">
<div class="contact-info-nested">
<i class="fa fa-envelope-o"></i>
<h4>penciltheme#gmail.com</h4>
</div>
</div>
</div>
</div>
</section>

The bootstrap's grid system is divided in 12, here'w an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12">
<center>
<h1>Column 1</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-6">
<center>
<h1>Column 2</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-4">
<center>
<h1>Column 2</h1>
</center>
</div>
<div class="col-lg-4">
<center>
<h1>Column 3</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-3">
<center>
<h1>Column 2</h1>
</center>
</div>
<div class="col-lg-3">
<center>
<h1>Column 3</h1>
</center>
</div>
<div class="col-lg-3">
<center>
<h1>Column 4</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<center>
<h1>Column 1</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 2</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 3</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 4</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 5</h1>
</center>
</div>
<div class="col-lg-2">
<center>
<h1>Column 6</h1>
</center>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<center>
<h4>Column 1</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 2</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 3</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 4</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 5</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 6</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 7</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 8</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 9</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 10</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 11</h4>
</center>
</div>
<div class="col-lg-1">
<center>
<h4>Column 12</h4>
</center>
</div>
</div>
If you want to make 3 columns, you should use col-lg-4 in the divs' class instead of 6.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Layout CSS & HTML, Alignment Issue - html

Related

How can I get this code to show fontawesome icons?

Align cards in page using css

Drawing empty horizontal bars using divs

Move icons in the middle of icon-div

Bootstrap columns contents

Categories

Resources