While utilizing Bootstrap 4, I am encountering an issue with the Footer section. My intention is to create three columns of equal width using the col-md-6 class as outlined in the documentation. Here is the code snippet:
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p>2018 © Hello World!</p>
</div>
<div class="col-md-6">
<div class="text-md-right footer-links d-none d-md-block">
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Support</a>
<a href="javascript: void(0);">Contact Us</a>
</div>
</div>
<div class="col-md-6">
<div>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
</div>
</footer>
The CSS used to style the footer is as follows:
.footer {
border-top: 1px solid rgba(152,166,173,.2);
bottom: 0;
padding: 19px 30px 20px;
position: absolute;
right: 0;
color: #98a6ad;
left: 250px;
}
The outcome was far from what I anticipated. The content should ideally be centered within each column, however, all the elements appear as:
https://i.sstatic.net/f7zq1.jpg
Here is the fiddle for reference.
The expected layout is depicted below:
| 2018© Hello World! | About Support Contact Us | 1
The | symbols serve as placeholders to separate the content in each column, and the columns should expand or shrink based on the window resolution.