Bootstrap footer links full width and two column on mobile - html

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>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
<li>LINK 4</li>
<li>LINK 5</li>
<li>LINK 6</li>
<li>LINK 7</li>
</ul>
</div>
CSS
.footer-links {
color:#ffffff;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:inline-block;
font-family: HelveticaNeu;
}

Answer 1

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

Answer 2

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>LINK 1
</li>
<li>LINK 2
</li>
<li>LINK 3
</li>
<li>LINK 4
</li>
</ul>
</div>
<div class="col-sm-6 pad-top text-center">
<ul class="footer-links">
<li>LINK 5
</li>
<li>LINK 6
</li>
<li>LINK 7
</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.