Bootstrap 4 with rotating cards - html

I am creating my own card using Bootstrap v4 (with only rows and columns). The problem is when I try to put the two sides of the card on top of each other. I use position: absolute; They disappear completely
.thecard {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
}
.thecard__side {
background-color: orangered;
color: #fff;
font-size: 2rem;
height: 50rem;
transition: all .8s;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
}
.thecard__side--front {
background-color: orangered;
}
.thecard__side--back {
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.thecard:hover .thecard__side--front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.thecard:hover .thecard__side--back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
<div class="row mt-5">
<div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
<div class="thecard">
<div class="thecard__side thecard__side--front">
Front
</div>
<div class="thecard__side thecard__side--back">
Back
</div>
</div>
</div>
<div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
<div class="thecard">
<div class="thecard__side thecard__side--front">
Front
</div>
<div class="thecard__side thecard__side--back">
Back
</div>
</div>
</div>
<div class=" offset-md-3 mt-5 mt-lg-0 offset-lg-0 col-md-6 col-lg-4">
<div class="thecard">
<div class="thecard__side thecard__side--front">
Front
</div>
<div class="thecard__side thecard__side--back">
Back
</div>
</div>
</div>
</div>
any solution guys?


After multiple testing, the same height on both these classes fixed the issue for me:
.thecard {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 50rem;
}
.thecard__side {
background-color: orangered;
color: #fff;
font-size: 2rem;
height: 50rem;
transition: all .8s;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
}


You Can Try This Code
.thecard {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 350px;
}
.thecard__side {
background-color: orangered;
color: #fff;
font-size: 2rem;
height: 50rem;
transition: all .8s;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
}
.thecard__side--front {
background-color: orangered;
}
.thecard__side--back {
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.thecard:hover .thecard__side--front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.thecard:hover .thecard__side--back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
<div class="row mt-5">
<div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
<div class="thecard">
<div class="thecard__side thecard__side--front">
Front
</div>
<div class="thecard__side thecard__side--back">
Back
</div>
</div>
</div>
<div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
<div class="thecard">
<div class="thecard__side thecard__side--front">
Front
</div>
<div class="thecard__side thecard__side--back">
Back
</div>
</div>
</div>
<div class=" offset-md-3 mt-5 mt-lg-0 offset-lg-0 col-md-6 col-lg-4">
<div class="thecard">
<div class="thecard__side thecard__side--front">
Front
</div>
<div class="thecard__side thecard__side--back">
Back
</div>
</div>
</div>
</div>

Related

How to do transform with click in button

I am trying to make a flip card work through a button, it is working normally with :hover but I cannot make it work with a button. I've tried using jquery and it didn't work can someone help me with this problem? (Im using bootstrap)
.card-flip > div {
backface-visibility: hidden;
transition: transform 300ms;
transition-timing-function: linear;
width: 100%;
height: 100%;
margin: 0;
display: flex;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top: 0;
}
.card-flip:hover .card-front {
transform: rotateY(-180deg);
}
.card-flip:hover .card-back {
transform: rotateY(0deg);
}
.test{
background-color: green;
}
.test2{
background-color: yellow;
}
<div class="container">
<div class="card card-flip h-100 test">
<div class="card-front text-white bg-dark">
<div class="card-body">
<i class="fa fa-search fa-5x float-right"></i>
<h3 class="card-title">Front</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card-back bg-white test2">
<div class="card-body">
<h3 class="card-title">Back</h3>
<p class="card-text">Suprise this one has more more more more content on the back!</p>
Action
</div>
</div>
</div>
</div>

did you want it? if you wedge on the yellow block, you will go back.
$('.card-flip').on('click', function() {
$('.card-front').css('transform', 'rotateY(-180deg)');
$('.card-back').css('transform', 'rotateY(0deg)');
});
$(document).on('click', '.card-back', function() {
$(this).css('transform', '');
$('.card-front').css('transform', '');
});
.card-flip > div {
backface-visibility: hidden;
transition: transform 300ms;
transition-timing-function: linear;
width: 100%;
height: 100%;
margin: 0;
display: flex;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top: 0;
}
/*.card-flip:hover .card-front {
transform: rotateY(-180deg);
}
.card-flip:hover .card-back {
transform: rotateY(0deg);
}*/
.test{
background-color: green;
}
.test2{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card card-flip h-100 test">
<div class="card-front text-white bg-dark">
<div class="card-body">
<i class="fa fa-search fa-5x float-right"></i>
<h3 class="card-title">Front</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card-back bg-white test2">
<div class="card-body">
<h3 class="card-title">Back</h3>
<p class="card-text">Suprise this one has more more more more content on the back!</p>
Action
</div>
</div>
</div>
</div>

Centre Image and Div Underlay in Bootstrap 4

I'm attempting to centre an image and div layer inside a containing div, but so far I can't get it to move from the left of the column. I've tried a few different ways but just can't get it to move. Even the margin auto trick isn't working, which I suspect is because bootstrap 4 is a flex box now.
HTML:
#user-avatar {
background: #ff4e00;
border-radius: 50%;
width: 250px;
margin-bottom: 25px;
position: relative;
}
#user img {
border-radius: 50%;
width: 250px;
transition: .5s ease;
backface-visibility: hidden;
}
#user-avatar:hover img {
cursor: pointer;
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle i {
font-size: 34px;
}
#user-avatar:hover .middle {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
<div class="col-12" id="user-avatar">
<img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
<p id="username" class="text-center"><span>Howdy </span>Liane</p>
<div id="xp-bar" class="text-left">
<div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
</div>
<p id="stats" class="text-right">Level 1</p>
</div>
It's the image and the 'underlay' ('middle' div) that I need to be in the center.

Add margin-left: 50% and transform: translateX(-50%) to #user-avatar. check below link.
thank you
http://jsfiddle.net/x1hphsvb/10994/

Add Class on id="user-avatar" to mx-auto
<div class="col-12 mx-auto" id="user-avatar">
<img class="d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
https://jsfiddle.net/lalji1051/v06j8orn/9/

simply add this style - centrd now
#user-avatar {
margin: 0 auto;
}

Portfolio hover overlay not staying in image size

For my portfolio site I am making I have it so when you hover over the portfolio image it overlays the title and category. My problem is the overlay section is picking up the margin and padding for the spacing of the images in the grid. I cant get it to be whatever the portfolio image size is without removing the gutter between the images.
Example below:
Not sure how to fix this and any help would be appreciated.
.thumbnail {
padding: 0px !important;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 0px;
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
padding: 0px 0px 0px 0px;
transition: .5s ease;
background-color: rgba(136, 24, 38, 0.6);
}
.thumbnail:hover .overlay {
opacity: 1;
height: 100%;
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<section id="work" class="bg-grey">
<div class="container-fluid text-center">
<h2>MY WORK</h2>
<!--<h4>What we have created</h4>-->
<div class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>

When you use a absolute positioned element, always set the respective relative, position element. Let me know if you have any issues with the output.
The only CSS change is to the below class. Where I have added the property position: relative.
.thumbnail {
padding: 0px !important;
position: relative;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
So your absolute positioned div with class overlay will be positioned with respect to the div with class thumbnail
.thumbnail {
padding: 0px !important;
position: relative;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 0px;
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
padding: 0px 0px 0px 0px;
transition: .5s ease;
background-color: rgba(136, 24, 38, 0.6);
}
.thumbnail:hover .overlay {
opacity: 1;
height: 100%;
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="work" class="bg-grey">
<div class="container-fluid text-center">
<h2>MY WORK</h2>
<!--<h4>What we have created</h4>-->
<div class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>

How to rotate top-border around the circle?

I'm trying to achieve this CSS animation but don't know how to do it. I want to rotate the top-border around the circle but the whole thing is rotating including text. I just want to rotate the top-border on 360 degree. Here is my code snippet below:
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Please help me out! Will really appreciate your help in this.Thank you in advance!

div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64, 0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 50%;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after {
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.col-md-3 {
position: relative;
}
.caption {
position: absolute;
z-index: 10;
text-align: center;
left: 65px; /* (120px width + 5+5px border )/2 */
transform: translate(-50%, 0);
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
<div class="circle last">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>

The solution is to make another div that will be behind the .circle with position:absolute; that how, it will "take" the .circle size but not contains the .circle content.
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
position:relative;
height: 120px;
width: 120px;
border: 5px solid #ccc;
/*border-top-color: orange;*/
border-radius: 50%;
background-color: #74002f;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
position:relative;
z-index:1;
}
.caption h6 {
font-size: 15px;
}
.circle-rotate {
height: 100%;
width: 100%;
border-top: 5px solid orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
position:absolute;
top:0;
left:0;
}
/*Animation on circle*/
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="circle-rotate"></div>
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>

Changing bootstrap gutter width

I need some help with bootstrap gutter width, I've tried almost everything and still can't make bigger space/padding between triangles with i want to make much bigger. Tried adding classes etc..
here's clean code
Media
#media only screen and (max-width : 1200px) {
/* Team */
.team-item .team-triangle {
width: 90px;
height: 90px;
}
.team-triangle .content {
width: 160px;
height: 160px;
}
.team-hover i {
margin-top: 50px;
}
.team-hover p {
font-size: 14px;
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
/* Team */
.team-item .team-triangle {
width: 120px;
height: 120px;
}
.team-triangle .content {
width: 190px;
height: 190px;
}
.team-hover i {
margin-top: 57px;
}
#team-section .col-md-2:nth-child(7n+5),
#team-section .col-md-2:nth-child(7n+1){
margin-left: 0 !important;
clear: none !important;
}
#team-section .col-md-2 {
float: left;
margin-bottom: 80px;
width: 33.3333%;
}
HTML
div class="container">
<div class="row">
<div class="team-items">
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.2s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title" />
<div class="team-hover text-center">
<a class="overlay" href="#"></a>
<i class="fa fa-male"></i>
<p>Plalalal</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.3s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-female"></i>
<p>Jane Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.4s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="team-container wow bounceIn" data-wow-delay="0.5s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<a class="overlay" href="#"></a>
<div class="team-container wow bounceIn" data-wow-delay="0.6s">
<div class="team-item">
<div class="team-triangle">
<div class="content">
<img src="img/team/1.jpg" alt="title"/>
<div class="team-hover text-center">
<i class="fa fa-male"></i>
<p>John Doe</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* ===== Begin team ===== */
.team-item {
height: 130px;
}
.team-item .team-triangle {
width: 130px;
height: 130px;
background: transparent;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 auto;
position: relative;
top: 25px;
box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 7px #dadbdb;
overflow: hidden;
}
.team-item img {
max-width: 100%;
}
.team-items {
margin-bottom: 50px;
padding-top: 0px;
margin-top: 0;
}
.team-triangle .content {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -35px;
position: absolute;
left: -37px;
width: 190px;
height: 190px;
}
.team-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 103, 109, 117, 0.9);
opacity: 0;
-webkit-transition: opacity 0.4s ease-in; /* For Safari 3.1 to 6.0 */
transition: opacity 0.4s ease-in;
}
.team-item .team-triangle:hover .team-hover {
opacity: 1;
}
.team-hover i {
color: rgba(255, 255, 255,.75);
font-size: 28px;
margin-top: 57px;
position: relative;
}
.team-hover p {
color: #ffffff;
font-size: 16px;
font-weight: 400;
margin-top: 0;
}
.team-items .col-md-2:nth-child(7n+5) {
clear: left;
margin-left: 24.9999999%;
}
.team-items .col-md-2:nth-child(7n+1) {
clear: left;
margin-left: 16.6666666%;
}
/* ===== End team ===== */

Maybe you want something like this.
.large-gutter > [class*='col-'] {
padding-right:50px;
padding-left:50px;
}
HTML
<div class="row large-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>