Bootstrap 4 Card cutting off div absolute content - css

Question

I'm having an issue where I'm trying to add a rounded icon to the top center of a card, but the part of the icon is cutting off. Need help figuring it out
.header-icon-round {
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 30px;
background-color: #fff;
color: gray;
border: 2px solid #dedede;
position: relative;
margin: 0 auto;
padding: 0;
line-height: 60px;
position: absolute;
top: -10px;
left: 50%;
margin-left: -30px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="card-columns">
<div class="card card-block text-xs-center">
<div class="header-icon-round">
<i class="ti-wallet"></i>
</div>
<h4 class="card-title" style="padding-top: 80px;">
My title
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p>
Button Call
</div>
</div>
</div>
Thank you!

Answer 1

I recently answered the same question here:
Cards crops bootstrap 4
This is a known issue introduced in alpha 4 (will be fixed in alpha 5): https://github.com/twbs/bootstrap/issues/20654
The workaround is to use..
.card-columns .card {
display: inline-block;
width:100%;
}
http://www.codeply.com/go/1V7ssBt8xq

Answer 2

Just remove position: absolute; top: -10px; from .header-icon-round class.
.header-icon-round {
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 30px;
background-color: #fff;
color: gray;
border: 2px solid #dedede;
position: relative;
margin: 0 auto;
padding: 0;
line-height: 60px;
/*position: absolute;*/
/* top: -10px;*/
left: 50%;
margin-left: -30px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="card-columns">
<div class="card card-block text-xs-center">
<div class="header-icon-round">
<i class="ti-wallet"></i>
</div>
<h4 class="card-title" style="padding-top: 80px;">
My title
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p>
Button Call
</div>
</div>
</div>