CODEWITHSUNDEEP
htmlcss
Omar Gonzales
Omar Gonzales

Reputation: 4008

Set same margins to footer as for body

I've a footer that is divided in 2 columns, 1 to the left and 1 to the right.

enter image description here

But I'd like to set the margins so the content of the footer is align with the body (with the images you see there).

I've used Bootstrap4 tags (container) for the body but it is not working for the footer.

I'm expecting to replicate this:

enter image description here

Codepen

https://codepen.io/anon/pen/vwMowX

footer:

<!-- /* NEW FOOTER */ -->

{% load staticfiles %}

<style>
    ul > li {
        display: inline-block;
        /* You can also add some margins here to make it look prettier */
        zoom:1;
        *display:inline;
        /* this fix is needed for IE7- */
    }
</style>

<div class="container-fluid">
<div id="footer-navbar" class="row footer navbar-fixed-bottom padding-top2 padding-bottom2">
        <div class="col-md-6">
            <div class="">

                <nav class="">
                    <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">

                            <ul class="">
                                <li class="">
                                    <a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
                                </li>
                                <li class="">
                                    <a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
                                </li>
                                <li class="">
                                    <a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
                                </li>
                            </ul>

                    </div>
                </nav>

                <ul class="left footer-links footer-interact hidden-md-down">
                    <li><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></i></a></li>
                    <li><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></i></a></li>
                    <li><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square"></i></i></a></li>
                    <li><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></i></a></li>
                </ul>
            </div>

        </div>

        <div class="col-md-6 text-right">

            <div class="">
                <p><img src="{% static 'img/home/peru-flag.png' %}"
                    width="40px" height="40px">Perú</p>
            </div>

                <div class="right footer-legal">
                        <span>&copy; 2019 StickersGallito</span>
                <a href="/legal/privacy">Privacy</a> &amp; <a href="/legal/terms">Terms</a>

                    </div>

        </div>
</div>
</div>

UPDATE 1

adding the container-fluid div and container div don't allow the background to go full width.

enter image description here

Upvotes: 0

Views: 303

Answers (2)

Manu
Manu

Reputation: 1662

This works for me:

https://codepen.io/anon/pen/jooNYJ#anon-login

All changes I've done are in the first 2 divs

They should look like:

<div id="footer-navbar">
  <div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
    ***content***
  </div>
</div>

Upvotes: 1

Azer
Azer

Reputation: 1287

The class container-fluid sets width to 100%, container doesn't. You need to have an inner wrapping div with the container class.

<div class="container-fluid">
    <div class="container">
        *** Put your footer in here ***
    </div>
</div>

The inner div will be centered.

Upvotes: 1

Related Questions