How do I make a footer like on Joomla.org? Topic is solved

[MAD King]

I would like to have everything lined as shown on the Joomla.org website.
How would I do this?

11.jpg

[pe7er]

You could use some CSS to align the text to the center.
See https://www.w3schools.com/css/css_align.asp

[AMurray]

Do you mean not only the centred text, but also the "subscribe to our newsletter" button and the social media buttons? (since all of that is in your screenshot).

Check also the references in w3schools for icons, and buttons.

[MAD King]

Do you mean not only the centred text, but also the "subscribe to our newsletter" button and the social media buttons? (since all of that is in your screenshot).

Yes, that is what I mean.
How do I do it all in line?

[xfsgpr]

Yes, that is what I mean.
How do I do it all in line?

Something like this?

Code: Select all

<div class="text-center text-white" style="background-color: #1f2f5f;color:#fff">
<div class="container pt-4">
<section class="mb-4"><a href="https://facebook.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-facebook-f"></i></a> <!-- Twitter --> <a href="https://twitter.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-twitter"></i></a> <!-- Google --> <a href="https://google.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-google"></i></a> <a href="https://instagram.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-instagram"></i></a> <a href="https://linkedin.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-linkedin"></i></a> <a href="https://github.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-github"></i></a></section>
</div>
<div class="text-center p-3">© 2023 Copyright: <a href="https://joomla.org/" class="text-light">joomla.org</a></div>
</div>

[MAD King]

Yes. Exactly. Thank you very much.

Yes, that is what I mean.
How do I do it all in line?

Something like this?

Code: Select all

<div class="text-center text-white" style="background-color: #1f2f5f;color:#fff">
<div class="container pt-4">
<section class="mb-4"><a href="https://facebook.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-facebook-f"></i></a> <!-- Twitter --> <a href="https://twitter.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-twitter"></i></a> <!-- Google --> <a href="https://google.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-google"></i></a> <a href="https://instagram.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-instagram"></i></a> <a href="https://linkedin.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-linkedin"></i></a> <a href="https://github.com" class="btn btn-link btn-floating btn-lg text-light m-1" role="button" data-mdb-ripple-color="dark"><i class="fab fa-github"></i></a></section>
</div>
<div class="text-center p-3">© 2023 Copyright: <a href="https://joomla.org/" class="text-light">joomla.org</a></div>
</div>