Converting tabular footer to use Bootstrap's responsive scaffolding system

I have a small footer that I currently using a table to style with. Here's an image of what it looks like with all styles applied:

The previous code for it is as follows:

.table-footer-list {
  vertical-align: left;
  width: 2px;
  align: left;
}
.table-footer-ul {
  list-style-type: none;
}
.table-footer-ul li a {
  color: gray;
  text-decoration: none;
}
.vertical-line-td {
  horizontal-align: top;
  padding: 20px;
}
.image-id {
  width: 2px;
  display: inline;
}
hr.vertical-line {
  border-left: thick;
  background-color: #a8a8a8;
  width: 2px;
  height: 180px;
}
.image_container {
  width: 300px;
  height: 300px;
  line-height: 280px;
}

<table class="footer-table" style="align:left">
  <tbody>
    <tr>
      <td class="table-footer-list">
        <ul class="table-footer-ul">
          <li>
            <p><a href="#">CAREERS</a>
            </p>
          </li>
          <li>
            <p><a href="#">REQUEST INFORMATION</a>
            </p>
          </li>
          <li>
            <p><a href="#">PRIVACY</a>
            </p>
          </li>
          <li>
            <p><a href="#">TERMS OF USE</a>
            </p>
          </li>
        </ul>
      </td>
      <td class="vertical-line-td">
        <hr class="vertical-line">
      </td>
      <td class="image-td">
        <div class="image_container">

          <img src="http://tearscience.com/en/wp-content/themes/tearscience/images/icon-linkedin-circle-darkblue.png" />

          <img src="http://www.medocity.com/wp-content/uploads/2015/07/images/1417628763-facebook-circle-color-321.png" />

          <img src="http://www.rockwest.tv/images/icons/twitter-circle-24.png" />

          <img src="http://www.ohkaymusic.com/communities/1/004/009/931/831//images/4614920772_29x28.png " />
        </div>
      </td>
    </tr>
  </tbody>
</table>

I am trying to develop a responsive footer instead. After much research, I have the following:

<div class="partial-container">
    <div class="container-fluid">
        <div class="grid_row">
            <div class="col-md-4 test" style="padding:0px;margin left:0px;margin-right:0px;">
                <li>
                    <p><a href="#">CAREERS</a></p>
                </li>
                <li>
                    <p><a href="#">REQUEST INFORMATION</a></p>
                </li>
                <li>
                    <p><a href="#">PRIVACY</a></p>
                </li>
                <li>
                    <p><a href="#">TERMS OF USE</a></p>
                </li>
            </div>
            <div class="col-md-4 test" style="padding:0px;margin-left:0px; margin-right:0px;">
                <hr class="vertical-line">
            </div>
            <div class="col-md-4 test" style="padding:0px;margin-left:0px;margin-right:0px;">
                <div class="image_container">
                    <img src="http://tearscience.com/en/wp-content/themes/tearscience/images/icon-linkedin-circle-darkblue.png"/>
                    <img src="http://www.medocity.com/wp-content/uploads/2015/07/images/1417628763-facebook-circle-color-321.png"/>
                    <img src="http://www.rockwest.tv/images/icons/twitter-circle-24.png"/>
                    <img src="http://www.ohkaymusic.com/communities/1/004/009/931/831//images/4614920772_29x28.png "/>
                </div>
            </div>
        </div>
    </div>
</div>

However, with no padding and margins I still cannot get the look you see at the link above. Any suggestions of how to manipulate the Bootstrap to get the look in the link is greatly appreciated.

UPDATE: The code provided did not solve the padding issue. It appears to be responsive on my current browser. Why is the padding still off? I have no additional CSS files included to throw the styling off. Please see the image here.