Footers

Copy Prettify Update

---

<div id="bsr-page-footer">
  <div class="row">
    <!-- brand bar -->
    <div class="col-sm-6 text-left">
      <img id="bsr-brand-image" src="https://unsplash.it/35/35" alt="brand icon" width="35" height="35"> <a href="#">  Brand Name</a>
    </div>
    <!-- social icons -->
    <div class="col-sm-6 text-right">
      <ul class="bsr-social-icons">
        <li><a href="#"><i class="fa fa-fw fa-lg fa-github-alt" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-fw fa-lg fa-linkedin" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-fw fa-lg fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-fw fa-lg fa-facebook-official" aria-hidden="true"></i></a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="row bsr-footer-main-links">
    <!-- link column left -->
    <div class="col-sm-4 bsr-footer-links">
      <h5>Heading</h5>
      <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
        <li class="list-group-item"><a href="#">Link 3</a></li>
        <li class="list-group-item"><a href="#">Link 4</a></li>
        <li class="list-group-item"><a href="#">Link 5</a></li>
        <li class="list-group-item"><a href="#">Link 6</a></li>
      </ul>
    </div>
    <!-- link column middle -->
    <div class="col-sm-4 bsr-footer-links">
      <h5>Heading</h5>
      <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
        <li class="list-group-item"><a href="#">Link 3</a></li>
        <li class="list-group-item"><a href="#">Link 4</a></li>
        <li class="list-group-item"><a href="#">Link 5</a></li>
        <li class="list-group-item"><a href="#">Link 6</a></li>
      </ul>
    </div>
    <!-- link column right -->
    <div class="col-sm-4 bsr-footer-links">
      <h5>Heading</h5>
      <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
        <li class="list-group-item"><a href="#">Link 3</a></li>
        <li class="list-group-item"><a href="#">Link 4</a></li>
        <li class="list-group-item"><a href="#">Link 5</a></li>
        <li class="list-group-item"><a href="#">Link 6</a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="row">
    <!-- copyright bar -->
    <div class="col-sm-6">
      <p><small>Copyright © 20XX Brand Name</small></p>
    </div>
    <!-- ancillary links bar -->
    <div class="col-sm-6">
      <ul class="bsr-footer-ancillary-links text-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
  </div>
</div>

Copy View all custom Bootstrapr.io CSS

---

#bsr-page-footer {
  padding: 3rem 2rem 1rem;
}

hr {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

/* Add right borders for the divs... */
#bsr-page-footer .bsr-footer-main-links div {
  border-right: 1px solid rgba(0, 0, 0, .1);
  padding: 1.25rem;
}

/* ...except no border on the right-most div */
#bsr-page-footer .bsr-footer-main-links div:last-of-type {
  border: none;
}

/* Remove bullets for social social icons */
#bsr-page-footer .bsr-social-icons {
  list-style-type: none;
}

/* Style the social icon list items further */
#bsr-page-footer .bsr-social-icons li {
  margin-left: .25rem;
  margin-right: .25rem;
  display: inline;
}

/* Remove styling on the main columnar links */
.bsr-footer-links li {
  background: transparent;
  border: 0px;
  padding: .25rem;
}

/* Styling for the ancillary links */
#bsr-page-footer .bsr-footer-ancillary-links {
  list-style-type: none;
}

#bsr-page-footer .bsr-footer-ancillary-links li {
  display: inline;
  margin-left: .3rem;
  margin-right: .3rem;
  text-align: right;
  font-size: smaller;
}