Hey there,
I'm currently utilizing Bootstrap 4.5 and attempting to create an aesthetically pleasing footer for my university website. I've implemented the following code:
<div class="container-fluid d-flex justify-content-center">
In order to center my footer without having the blocks spread too far apart.
However, when viewing on a larger screen (I tested this using Firefox), the text appears on two lines due to the centered alignment, whereas I'd prefer it to be on a single line to make better use of the available space: https://i.sstatic.net/SlGuf.png
If you need it for reference, here's the complete code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecad0cbd0cd">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<h4 class="text-center">some text</h4>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span><i class="fa fa-chevron-right pr-2"></i>some text some text sometext sometextsome text</span>
</a>
<span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i></span>
</div>
<div id="footer_ups" class="collapse pl-3" aria-labelledby="some text">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
<span><i class="fa fa-chevron-right pr-2"></i>some text sometextsome text</span>
</a>
<span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
</div>
<div id="footer_ipp" class="collapse pl-3" aria-labelledby="some text">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
</ul>
</div>
<br />
<i class="fa fa-chevron-right pr-2"></i><a href="" target="_blank">some textsome textsome textsome texttextsome textsome text</a>
</div>
<div class="col-lg-4 col-md-6 col-12 pb-4">
<h4 class="text-center">Aide et Informations légales</h4>
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
<li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center">
<h4 class="text-center">Suivez-nous</h4>
<a href="" target="_blank"><i class="fa fa-facebook-square fa-3x mr-3"></i></a>
<a href="" alt="" target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
<a href="" alt="" target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
<a href="" alt="" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
</div>
</div>
</div>
Do you think it's feasible to achieve this?
Thanks in advance!