After creating a footer using Bootstrap
, I encountered a slight issue with the middle column. Specifically, when I resize the window or view the app on a smartphone, I end up with this result:
https://i.sstatic.net/RBN7k.png
Here is the HTML code I used:
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
This is a footer.
</div>
<div class="col-md-4">
<div class="text-center footer-links d-none d-md-block">
<a href="javascript: void(0);">Link1</a>
<a href="javascript: void(0);">Link2</a>
<a href="javascript: void(0);">Link3</a>
</div>
</div>
<div class="col-md-4">
<form class="form-horizontal">
<label class="col-sm-3 control-label" for="requestCulture_RequestCulture_UICulture_Name">
Language:
</label>
<select>
<option>1</option>
<option>1</option>
</select>
</form>
</div>
</div>
</div>
</footer>