I have columns on the home page of a website I am building, each containing an icon and text. On mobile, however, the columns stack on top of each other and have inconsistent vertical spacing, due to the inconsistent length of the text. Is there any way to force the columns to have consistent spacing in mobile view?
(If you run the below code snippet, press full page to see the spacing issue I am referring to)
.info-blocks {
margin-bottom: 15px;
/* background: #efefef; */
}
.info-blocks i.icon-info-blocks {
float: left;
color: #FFEB3B;
font-size: 30px;
min-width: 50px;
margin-top: 7px;
text-align: center;
background: #002e5b;
width: 72px;
height: 72px;
padding-top: 7px;
border: 1px solid #002e5b;
border-radius: 50%;
}
.info-blocks .info-blocks-in {
padding: 0 10px;
overflow: hidden;
}
.info-blocks .info-blocks-in h3 {
color: #002e5b;
font-size: 18px;
line-height: 28px;
margin: 0px;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.info-blocks .info-blocks-in p {
font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<br>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</body>
You can assign a fixed height to .info-blocks .info-blocks-in
See snippet below (test it at different screen width):
.info-blocks {
margin-bottom: 15px;
/* background: #efefef; */
}
.info-blocks i.icon-info-blocks {
float: left;
color: #FFEB3B;
font-size: 30px;
min-width: 50px;
margin-top: 7px;
text-align: center;
background: #002e5b;
width: 72px;
height: 72px;
padding-top: 7px;
border: 1px solid #002e5b;
border-radius: 50%;
}
.info-blocks .info-blocks-in {
padding: 0 10px;
height:80px;
overflow: hidden;
}
.info-blocks .info-blocks-in h3 {
color: #002e5b;
font-size: 18px;
line-height: 28px;
margin: 0px;
margin-bottom: 8px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.info-blocks .info-blocks-in p {
font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<br>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut magna eleifend, fermentum arcu et, euismod neque. Sed ante elit.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 info-blocks">
<i class="icon-info-blocks"><span class="iconify" data-icon="mdi:map-legend" data-inline="false"></span></i>
<div class="info-blocks-in">
<h3>Explore</h3>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</body>
Related
I could get the result I want in many other ways, but I want to understand if it is possible to fix the layout while keeping the grid system.
Check the result first to get a better understanding
$(document).ready(function() {
$('#opt1').on('click', function() {
$('.item').css('grid-template-columns', 'minmax(110px, 1fr) auto');
});
$('#opt2').on('click', function() {
$('.item').css('grid-template-columns', 'minmax(110px, 1fr) max-content');
});
$('#opt3').on('click', function() {
$('.item').css('grid-template-columns', 'auto 1fr');
});
});
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px 25px;
margin-top: 25px;
}
.item {
position: relative;
display: grid;
grid-template-columns: minmax(110px, 1fr) auto;
background-color: #2f3138;
color: #ffffff;
padding: 15px;
}
.description {
display: grid;
grid-template-rows: auto 25px;
}
.price {
width: 100%;
font-size: 22px;
line-height: 25px;
text-align: right;
}
/* styles not important */
.item::before {
position: absolute;
font-family: monospace;
font-size: 18px;
font-weight: bold;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: solid 5px #2f3138;
top: -8px;
right: -8px;
}
.item:nth-child(1)::before {
content: "1";
}
.item:nth-child(2)::before {
content: "2";
}
.item:nth-child(3)::before {
content: "3";
}
.item:nth-child(4)::before {
content: "4";
}
input[type="button"] {
background-color: #000000;
border: solid 2px #2f3138;
color: #ffffff;
outline: none;
margin: 5px 15px 5px 0px;
padding: 5px 15px 8px 15px;
font-family: monospace;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="opt1" type="button" value="Original: minmax(110px, 1fr) auto" />
<input id="opt2" type="button" value="option 2: minmax(110px, 1fr) max-content" />
<input id="opt3" type="button" value="option 3: auto 1fr" />
<div class="container">
<div class="item">
<img src="https://placeimg.com/100/120/any" />
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/100/121/any" />
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
</div>
The layout represents a list of items. The HTML is generated on the server side, and I can have an item with the image and an item without an image. My goal is to get all items with the text always left aligned and the price on the right.
The key is this grid-template-columns: minmax (110px, 1fr) auto; the text will be auto with the image and 1fr without image. It always occupies the space it needs, but in item 3 the text is short and space it needs is little, I would like it to extend as in item 1.
The javascript part to show some attempts that still generate non optimal results.
I hope I was clear.
Thank you
Rely on implicit grid creation. Define your template for the text and price only then an extra column will be created for the image if there:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 25px;
}
.item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-auto-columns: 110px; /* this is the width of the extra column */
background-color: #2f3138;
color: #ffffff;
padding: 15px;
}
img {
grid-column-end:-2; /* create an implicit column at the beginning */
}
.description {
display: grid;
grid-template-rows: auto 25px;
}
.price {
font-size: 22px;
line-height: 25px;
text-align: right;
}
/* styles not important */
.item::before {
position: absolute;
font-family: monospace;
font-size: 18px;
font-weight: bold;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border: solid 5px #2f3138;
top: -8px;
right: -8px;
}
.item:nth-child(1)::before {
content: "1";
}
.item:nth-child(2)::before {
content: "2";
}
.item:nth-child(3)::before {
content: "3";
}
.item:nth-child(4)::before {
content: "4";
}
input[type="button"] {
background-color: #000000;
border: solid 2px #2f3138;
color: #ffffff;
outline: none;
margin: 5px 15px 5px 0px;
padding: 5px 15px 8px 15px;
font-family: monospace;
cursor: pointer;
}
<div class="container">
<div class="item">
<img src="https://placeimg.com/100/120/any" />
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/100/121/any" />
<div class="description">
<span>Short Text</span>
<div class="price">€ 3.33</div>
</div>
</div>
<div class="item">
<div class="description">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet mauris semper, interdum lacus a, fermentum risus.
</span>
<div class="price">€ 3.33</div>
</div>
</div>
</div>
I have 2 cards 50/50 split using flex. The flex items both have equal heights, but I'd like a child element of the item to fill the height of the parent. In the pen, this would mean the blue background color would expand to the height of its parent.
This question is very close but the background-clip: padding-box; doesn't solve the issue for me.
Online demo here: Code pen
.wrapper {
max-width: 70%;
margin: auto;
}
.cards-group {
display: flex;
.card {
flex: 1;
border: 1px solid #0074d9;
}
.card + .card {
margin-left: 30px;
}
}
.card-image {
img {
display: block;
border-radius: 3px;
margin-left: auto;
max-width: 90%;
}
} // .card-image
.card-section {
padding: 20px;
background-color: #7fdbff;
mix-blend-mode: multiply;
border-radius: 3px;
margin-top: -50px;
} // .card-section
<div class="wrapper">
<div class="cards-group">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div><!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div><!-- .card-section -->
</div>
</div><!-- .card -->
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div><!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div><!-- .card-section -->
</div>
</div>
<!-- .card -->
</div>
</div>
You can do that by adding display: flex; on .card :
.card {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid #0074d9;
}
And then telling your .card-section to take the remaining space with flex: 1 :
.card-section {
padding: 20px;
background-color: #7fdbff;
mix-blend-mode: multiply;
border-radius: 3px;
margin-top: -50px;
flex: 1;
}
.wrapper {
max-width: 70%;
margin: auto;
}
.cards-group {
display: flex;
}
.cards-group .card {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid #0074d9;
}
.cards-group .card + .card {
margin-left: 30px;
}
.card-image img {
display: block;
border-radius: 3px;
margin-left: auto;
max-width: 90%;
}
.card-section {
padding: 20px;
background-color: #7fdbff;
mix-blend-mode: multiply;
border-radius: 3px;
margin-top: -50px;
flex: 1;
}
<div class="wrapper">
<div class="cards-group">
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div>
<!-- .card-section -->
</div>
</div>
<!-- .card -->
<div class="card">
<div class="card-image">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<!-- .card-image -->
<div class="card-section">
<h3 class="card-title">Title</h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
<button type="button" class="card-button" onclick="location.href=''">Link</button>
</div>
<!-- .card-section -->
</div>
</div>
<!-- .card -->
</div>
</div>
I'm having some issues with item alignment in IE and Safari and I'm not that good on cross-browser compatibility so would appreciate it if someone could suggest what I'm doing wrong with the following or what may be a good general fix.
Codepen: http://codepen.io/nickwcook/pen/vxjavM?editors=0110.
EDIT: Home image alignment sorted, but still having issues with the following:
The text in the About section of the page is fine in other browsers, but in IE its not taking into account the horizontal padding (30px) of the parent, and is actually overflowing past the sides of the viewport.
HTML:
<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">
<div id="borderTop"></div>
<div id="borderRight"></div>
<div id="borderBottom"></div>
<div id="borderLeft"></div>
<div id="logo">
<img src="img/logo-basic-dark.png" alt="Logo">
</div>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav pull-right">
<li class="navLink">Home</li>
<li class="navLink">About</li>
<li class="navLink">Work</li>
<li class="navLink">Contact</li>
</ul>
</div>
</nav>
</div>
<main>
<section id="home">
<div class="sectionContent">
<div id="homeText">
<h1 id="homePrimary">Home Text Primary</h1>
<h2 id="homeSecondary">Home Text Secondary</h2>
</div>
<div id="homeImageContainer">
<div id="homeImage" class="blend-red-blue">
<div id="homeImageMask"></div>
</div>
</div>
</div>
</section>
<section id="about" ng-controller="skillsController">
<div class="sectionContent">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-push-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="skillsList">
<p>My skills include:</p>
<p ng-repeat="skill in skills" class="skillItem">{{skill.name}}</p>
</div>
</div>
</div>
</div>
</section>
<section id="work" ng-controller="projectsController">
<div class="sectionContent">
<div class="row">
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="sectionContent">
</div>
</section>
</main>
</body>
CSS:
/* GENERAL LAYOUT */
html, body
{
padding: 0;
margin: 0;
background-color: #fefefe;
overflow-x: hidden;
}
/* SECTIONS */
section
{
display: block;
margin: 0;
background: transparent;
z-index: 90;
}
.sectionContent
{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* HOME SECTION */
#home #homeImageContainer
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#home #homeImage
{
position: absolute;
height: 30vw;
width: 30vw;
background-image: url('../img/laptop-hands.png');
background-position: center center;
background-size: cover;
z-index: 90;
-webkit-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
-moz-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
}
#home #homeImage > #homeImageMask
{
height: 100%;
width: 100%;
background-color: rgba(84, 17, 200, 0.6);
z-index: 91;
}
#home #homeText
{
z-index: 95;
}
#homeText h1#homePrimary,
#homeText h2#homeSecondary
{
color: #000;
text-align: center;
}
#homeText h1#homePrimary
{
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}
#homeText h2#homeSecondary
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
}
/* ABOUT SECTION */
#about p
{
line-height: 26px;
text-align: center;
}
#about #skillsList
{
width: 100%;
text-align: center;
margin-top: 50px;
}
#about #skillsList p:first-of-type
{
margin-bottom: 10px;
}
#about #skillsList p.skillItem
{
display: inline;
margin: 0 15px;
}
what about simplifying like this:
body, h1, h2 {
margin: 0;
}
.box-content {
width: 30vw;
height: 30vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
background: rgba(84, 17, 200, 0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-shadow: 3px 3px 100px 4px rgba(153, 153, 153, 1);
text-align: center;
}
<div class="sectionContent">
<div id="homeText" class="box-content">
<h1 id="homePrimary">Home Text Primary</h1>
<h2 id="homeSecondary">Home Text Secondary</h2>
</div>
</div>
You can remove absolute css property from selector '#home #homeImage' issue is fixed at my end
I would like the overlay content to come from bottom of the image when hovered, but for some reason it's always visible, am I missing something with positioning? Here's the pen: http://codepen.io/anon/pen/PbjVgy
* {
background-color: grey;
color: white;
}
.about__images {
max-width: 800px;
margin: 0 auto;
}
.about__inner {
margin-top: 60px;
}
.about__inner img {
max-width: 100%;
margin-right: 20px;
}
/**/
.about .about__inner {
position: relative;
}
.about .about__inner .about__inner--overlay {
position: absolute;
top: 100%;
left: 15px;
text-align: center;
background: rgba(0, 0, 0, 0.8);
width: 89%;
height: 100%;
transition: all 0.1s ease-in;
}
p {
margin-top: 60px;
}
.about .about__inner:hover .about__inner--overlay {
top: 0;
}
<section class="about">
<h5 class="small__title">Lorem ipsum</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi nisi aut animi, excepturi impedit dicta natus culpa. Veniam atque sapiente assumenda fugiat tempore ipsam eos quae</p>
<div class="container">
<div class="about__images">
<div class="row">
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
<div class="about__inner--overlay">
<p>overlay content</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>overlay content</p>
</div>
</div>
<div class="about__inner col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
<div class="about__inner--overlay">
<i class="fa fa-user" aria-hidden="true"></i>
<p>overlay content</p>
</div>
</div>
</div>
</div>
</div>
</section>
Add overflow: hidden to .about__inner
.about__inner {
margin-top: 60px;
overflow: hidden;
}
http://codepen.io/anon/pen/ENXMxW
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!
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
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>