How to keep the footer element aligned? - html

Question

I'm trying to make my footer responsive so after reading and using some example I have make one but it's not as I want to.
I want to display the Data protection disclaimer contact in a row and not one upside one.
.table {
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
clear: both;
color: white;
background-color: black;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
display:table;
width:100%;
}
.table > div {
display:table-cell;
width:33%;
}
.table > .cell150 {
width:33%;
}
.cell150:before {
content:'';
display:inline-block;
width:33%;
}
.a{
background-color: blue;
}
.b{
background-color: yellow;
}
.c{
background-color: pink;
}
<div class="table">
<div class="cell150 a">
V 1.1
</div>
<div class="cell150 b">
Hi StackOverflow
</div>
<div class="cell150 c">
<div class="col-xs-4 col-sm-8 col-md-4">
Data protectionDisclaimer<a class="footer-item">Contact</a>
</div>
</div>
</div>
Ok so here I don't know why it is displaying as I want to... but in my case it's like this:
Do you guys have an idea how to solve this ?

Answer 1

Check out this.
Change col-md-4 to col-md-12
note : see the result in full page view
.table {
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
clear: both;
color: white;
background-color: black;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
display: table;
width: 100%;
}
.table>div {
display: table-cell;
width: 33%;
}
.table>.cell150 {
width: 33%;
}
.cell150:before {
content: '';
display: inline-block;
width: 33%;
}
.a {
background-color: blue;
}
.b {
background-color: yellow;
}
.c {
background-color: pink;
}
.footer-item {
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
<div class="cell150 a">
V 1.1
</div>
<div class="cell150 b">
Hi StackOverflow
</div>
<div class="cell150 c">
<div class="col-xs-4 col-sm-8 col-md-12">
Data protectionDisclaimer<a class="footer-item">Contact</a>
</div>
</div>
</div>

Answer 2

<div class="table">
<div class="cell150 a">
V 1.1
</div>
<div class="cell150 b">
Hi StackOverflow
</div>
<div class="cell150 c">
<div class="col-xs-12 col-sm-12 col-md-12">
<ul>
<li>Data protection </li>
<li>Disclaimer </li>
<li><a class="footer-item">Contact</a> </li>
</ul>
</div>
</div>
</div>
ul {
list-style: none;
padding: 0px;
}
ul li {
display: inline;
padding: 3px;
}

Answer 3

Like this? Although in xs screen, they will be in separate lines
.table {
text-align: center;
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
clear: both;
color: white;
background-color: black;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
display: table;
width: 100%;
}
.table>div {
display: table-cell;
width: 33%;
}
.table>.cell150 {
width: 33%;
}
.cell150:before {
content: '';
display: inline-block;
width: 33%;
}
.a {
background-color: blue;
}
.b {
background-color: yellow;
}
.c {
background-color: pink;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
<div class="col-xs-4 a">
V 1.1
</div>
<div class="col-xs-4 b">
Hi StackOverflow
</div>
<div class="col-xs-4 c">
<div class="col-xs-12 ">
Data protection
Disclaimer
<a class="col-sm-4 footer-item">Contact</a>
</div>
</div>
</div>