Text vertical centered in sticky BootStrap footer - html

Question

i have big problem with vertical center in BS footer. My code below :
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-justified">
<li>SITE1</li>
<li>SITE2</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<div class="center-inner">
<p class="text-muted inner">Some text.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<p>More text.</p>
</div>
</div>
</div>
</div>
JSFiddle
Unfortunatelly, text in 2nd and 3th column isn't vertically centered. I tried solutions from similar topics, but sadly - without good effects in sticky footer (in most cases - it changed footer height and layout - after added display:table).
Below i uploaded graphic illustrating how it looks today, and how I would like it to look :
Home somebody can help me with this.

Answer 1

You can use this:
.center-vertical{
display: flex;
align-items: center;
}
(just apply to parent boxes)
https://jsfiddle.net/kaskull/z4wLpk9h/5/

Answer 2

Try this
You can set the media-query value to set the break-point.
Check working updated demo
HTML:
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
<div class="row row-eq-height">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-justified">
<li>SITE1</li>
<li>SITE2</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<div class="center-inner">
<p class="text-muted inner">Some text.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<p>More text.</p>
</div>
</div>
</div>
</footer>
CSS:
#media screen and (max-width: 767px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
}
}
footer [class*="col-"] p {
padding: 10px 15px;
margin-bottom: 0;
}

Answer 3

Please check this.
footer .text-muted.inner, footer p{padding:10px 15px;margin:0;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-justified">
<li>SITE1</li>
<li>SITE2</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<div class="center-inner">
<p class="text-muted inner">Some text.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<p>More text.</p>
</div>
</div>
</div>
</div>
</footer>
Hope this will help you.
Thanks.

Answer 4

It's because your links has a padding around it, so that you should also adding padding in p tag.
.footer [class*="col-"] p {
padding: 10px 15px;
margin: 0;
}
Working Demo