SoftTimur SoftTimur - 4 months ago 12
CSS Question

Margin between a title and the icons below it

I try to modify a bootstrap template I downloaded. The existing setting for the title

What we do
is
<h2 class="title text-center sr-only">What we do</h2>
. But I want to show it, so I change this line to
<h2 class="title text-center">What we do</h2>
. The whole section code is as follows:

<section id="features" class="features section">
<div class="container">
<div class="row">
<h2 class="title text-center">What we do</h2>
<div class="item col-md-4 col-sm-6 col-xs-12 text-center">
<div class="icon">
<i class="fa fa-cloud-upload"></i>
</div><!--//icon-->
<div class="content">
<h3 class="title">App Feature One</h3>
<p>Outline an app feature/benefit here. You can change the icon above to any of the 500+ <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">FontAwesome icons</a> available. </p>
<button class="modal-trigger btn btn-link" data-toggle="modal" data-target="#feature-modal-1">Find out more</button>
</div><!--//content-->
</div><!--//item-->
<div class="item col-md-4 col-sm-6 col-xs-12 text-center">
...
</div><!--//item-->
<div class="item col-md-4 col-sm-6 col-xs-12 text-center">
...
</div><!--//item-->
</div><!--//row-->
</div><!--//container-->
</section><!--//features-->


And it looks as follows. The problem is that I feel the title is too close to the icons below.

enter image description here

However, this problem does not exist for the following existing code:

<section id="testimonials" class="testimonials section">
<div class="container">
<div class="row">
<h2 class="title text-center">What do people think?</h2>
<div class="item col-md-4 col-sm-4">
<div class="quote-box">
<i class="fa fa-quote-left"></i>
<blockquote class="quote">
<a href="#">@Delta</a> I love this #app. Lorem ipsum dolor sit amet, consectetur adipiscing elit. #Mobile
</blockquote><!--//quote-->
</div><!--//quote-box-->
<div class="people row">
<img class="img-rounded user-pic col-md-5 col-sm-5 col-xs-12 col-md-offset-1 col-sm-offset-1" src="assets/images/people/people-1.png" alt="" />
<p class="details text-center pull-left">
<span class="name">Christine Heal</span>
<span class="title">Bristol, UK</span>
</p>
</div><!--//people-->
</div><!--//item-->
<div class="item col-md-4 col-sm-4">
<div class="quote-box">
...


which shows:

enter image description here

Does anyone know how to modify the class style to give an appropriate space between the title and the icons below it?

PS: the
features
part in
base.less
:

.features {
padding: 80px 0;
.icon {
position:relative;
width: 90px;
height: 90px;
border: 3px solid @color;
.border-radius(50%);
display: table;
margin: 0 auto;
-webkit-transition: -webkit-transform ease-out 0.2s, background 0.3s;
-moz-transition: -moz-transform ease-out 0.2s, background 0.3s;
transition: transform ease-out 0.2s, background 0.3s;

&:hover {
background: @color;
color: #fff;
.fa {
color: #fff;
.scale(0.93);
}
.pe-icon {
color: #fff;
.scale(0.93);
}
}
.fa {
color: @color;
font-size: 48px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.pe-icon {
color: @color;
font-size: 48px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
.content {
padding: 30px;
.title {
color: @color;
font-size: 18px;
margin-top: 0;
}
p {
font-weight: 300;
}
}
.feature-row-last {
margin-top: 30px;
}
.btn-link {
color: @color;
&:hover {
color: darken(@color, 10%);
}
}
}

Answer

you can use padding in <h2 class="title text-center">What we do</h2> this line.

padding:10px 0px;

It will help you to give proper margin. change the css from firbug, so that you can see output.