Bootstrap footer links full width and two column on mobile

Question

I have a footer with 7 links which i am centering on desktop. On mobile i would like these links to stack one on top of the other centered in one column, however they currently show inline in 2 rows of 3 columns and 1 now of 1.

HTML

<div class="col-md-12 pad-top text-center">           
  <ul class="footer-links">
    <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>
    <li><a href="#">LINK 5</a></li>
    <li><a href="#">LINK 6</a></li>
    <li><a href="#">LINK 7</a></li>
  </ul>
</div>

CSS

.footer-links {
  color:#ffffff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display:inline-block;
  font-family: HelveticaNeu;
}

it will actually jump to 2 (or more) lines if the space is not sufficient, but tell us, what did you try to achieve what you want...? — benomatis, Mar 30 '16 at 18:57
In addition to the above comment, you say you want the result to be in two columns on mobile, but how many links do you want in each column? — MattD, Mar 30 '16 at 19:00
I second the comment of @MattD - a valid question... and by the way, if you know bootstrap's grid system, you'd know that simply splitting (wherever you wanted) the list into 2 divs with class `col-xs-6` each could potentially resolve this issue, if that's what you want... — benomatis, Mar 30 '16 at 19:03
Going from one column on desktops/tablets to two columns on mobile for links in a footer just comes across as odd to me. Typically you want a more linear layout on mobile, so it would make more sense to have two columns on desktops/tablets, and then show them as one column on mobile. — MattD, Mar 30 '16 at 19:11
Ok i realise now its stupid to have it as two columns how can I have it as one? just centered one column on mobile stacking all the links. — user1673498, Mar 30 '16 at 20:02

score 0 · Answer 1 · edited May 23 '17 at 12:24

For example you can add class to the footer that will hide it, when user will watch from mobile device. And then unhide two columns with two lists.

Maybe it's a bit clumsy solution, but it is also a relatively good solution ;)

HTML

<div class="col-lg-12 col-md-12 pad-top text-center hideBlock">
   <ul class="footer-links">
      <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>
      <li><a href="#">LINK 5</a></li>
      <li><a href="#">LINK 6</a></li>
      <li><a href="#">LINK 7</a></li>
   </ul>
</div>
<div class="col-xs-6 pad-top text-center unhideBlock">
   <ul class="footer-links">
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
   </ul>
</div>
<div class="col-xs-6 pad-top text-center unhideBlock">
   <ul class="footer-links">
      <li><a href="#">LINK 4</a></li>
      <li><a href="#">LINK 5</a></li>
      <li><a href="#">LINK 6</a></li>
      <li><a href="#">LINK 7</a></li>
   </ul>
</div>

CSS

@media (min-width: 768px){
   .hideBlock {
     display: block;
   }

   .unhideBlock {
     display: none;
   }
}

@media (max-width: 768px){
   .hideBlock {
     display: none;
   }

   .unhideBlock {
     display: block;
   }
}

But if you only need to break list into columns here is the useful >>> link

Bootstrap already has responsive utilities to handle showing and hiding elements at certain viewport widths. No need to write custom CSS to handle this. http://getbootstrap.com/css/#responsive-utilities — MattD, Mar 30 '16 at 19:45

MattD · Answer 2 · 2016-03-31T17:45:21.303

Per your comment yesterday, you've noted you want to have two columns on desktops/tablets, but one column on mobile and smaller widths.

This is fairly easy to achieve, you simply need to split the links into two separate divs.

.footer-links {
  color: #ffffff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  font-family: HelveticaNeu;
}

.footer-links li:not(:last-child) {
  padding-bottom: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6 pad-top text-center">
  <ul class="footer-links">
    <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 class="col-sm-6 pad-top text-center">
  <ul class="footer-links">
    <li><a href="#">LINK 5</a>
    </li>
    <li><a href="#">LINK 6</a>
    </li>
    <li><a href="#">LINK 7</a>
    </li>
  </ul>
</div>

When you run the above snippet, you'll note that all the links are arranged in a single column. When you click to run the snippet in full screen, they'll expand out to be two columns.

I also added some CSS for the line items in the unordered list to add padding to the bottom of all li tags except for the last one to account for the odd spacing you get when in a mobile view. You can play around with that to suit your needs.

While you still haven't indicated how many links you would like in each column, this should get you started.

Bootstrap footer links full width and two column on mobile

2 Answers2