CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-4
Kitara
Kitara

Reputation: 401

Bootstrap 4 Card cutting off div absolute content

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>
            <a href="" class="btn btn-outline-primary btn-rounded">Button Call</a>
        </div>
    </div>
</div>

Thank you!

Upvotes: 0

Views: 2239

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362520

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

Upvotes: 2

smalinux
smalinux

Reputation: 1152

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>
            <a href="" class="btn btn-outline-primary btn-rounded">Button Call</a>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions