Floating Bootstrap Columns - html

Question

I have a footer I am making for a webpage that looks like this
As you can see the right column will not stay in line with the others and the spacing between them is not even. The gradient behind each column is a picture. I tried using pull-right but when I go to resize then it looks weird and doesn't stack on top of each other. Here's my HTML:
<div class="row">
<div class="gradient left">
<div class="text-center button-center">
<a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
<i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS<br>PORTAL</a>
</div>
</div>
<div class="gradient text-center center">
<div class="vertical-center">
<h4 id="connect">Connect With Us!</h4>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-envelope fa-2x"></i></div>
</div>
<div class="gradient text-center right">
<h3 id="ML">Click to view our upcoming events</h3>
<i class="fa fa-calendar fa-2x" ></i></div>
</div>
and here's the CSS:
.gradient{
width: 278px;
height: 106px;
background-image: url('gradient.png');
}
.button-center{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.vertical-center{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.left{
float: left;
}
.center{
margin-right: auto;
margin-left: auto;
}
.right{
float: right;
}
I need each section to be evenly spaced and to stack correctly when it's resized. And the footer spans the whole container FYI.

Answer 1

within the <div class = 'row'> can add the <div class = "col-sm-4 '> as shown in the Grid System of bootstrap
<div class="row">
<div class="col-sm-4" style='background: #55D946'>a</div>
<div class="col-sm-4" style='background: #5333EC'>b</div>
<div class="col-sm-4" style='background: #D8F02F'>c</div>
</div>

Answer 2

Since your using bootstrap you can use columns in your row, i have added this to your code. Look at how the boostrap grid system works for further understanding.
see Updated Code
.gradient {
width: 278px;
height: 106px;
background-image: url('gradient.png');
}
.button-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.left {
float: left;
}
.center {
margin-right: auto;
margin-left: auto;
}
.right {
margin-bottom: 20px;
float: right;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 gradient left">
<div class="text-center button-center">
<a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
<i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS
<br>PORTAL</a>
</div>
</div>
<div class="col-xs-4 gradient text-center center">
<div class="vertical-center">
<h4 id="connect">Connect With Us!</h4>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
<div class="col-xs-4 gradient text-center right">
<h3 id="ML">Click to view our upcoming events</h3>
<i class="fa fa-calendar fa-2x" ></i>
</div>
</div>

Answer 3

As you know with bootstrap you get a 12 grids running across.
You need something like:
div class = row for container .
div class= col-md-4 // for all 3 boxes. This assumes no margins or padding on divs otherwise change 4 to a 3