Adjusting Footer after migrating to Bootstrap 4

Question

I was using the Boostrap 3 and migrated to the 4, only some things broke. I managed to solve some, but I have a problem with this footer.

 <div class="copyright">
    <div class="container">
        <div class="col-md-6 ">
            <p>© Copyright  @DateTime.Now.Year.- LMS/US-LOG/OLNF/TM</p>
        </div>
        <div class="row">
            <div class="col-md-6">
                <ul class="bottom_ul">
                    <li><a target="_blank">GISSUB</a></li>
                    <li><a href="#">SGMAR</a></li>
                    <li><a href="#">Suporte</a></li>
                    <li><a href="#">Chamados</a></li>
                    <li><a href="#">Recursos</a></li>
                </ul>
            </div>
        </div>
    </div>

 .bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
 .bottom_ul li { float:left; line-height:40px;}
 .bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
 .bottom_ul li a { color:#FFF;  font-size:12px;}

As you can see in the image below, they are not aligned. How would I leave these Divs on the same line and the right div aligned to the right of the screen?

Answer 1

Your code is in some trouble.

First to div copyright is not closed. Then your div class row is in the wrong place she should be before the first col-md-6, then you need to use the same line-height in the elements for it to align...

To adjust the text to be aligned the first left on large screens and the other right on large screens you can use alignments on flex to the UL and with text-align to the col-md-6

Text alignment: https://getbootstrap.com/docs/4.0/utilities/text/
Flex alignment: https://getbootstrap.com/docs/4.0/utilities/flex/

It would look something like this to align right and left and then on small screens puts everything centered as in the image above.

<div class=" col-md-6 text-center text-md-left">
<ul class="bottom_ul d-flex justify-content-center justify-content-md-end">

See the result here: Display on "Whole page" since you are using col-md only two columns will be in the same row on larger screens than 765px

.copyright p {
    line-height: 40px;
}

.bottom_ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0px;
}

.bottom_ul li {
    line-height: 40px;
}

.bottom_ul li:after {
    content: "/";
    color: #f00;
    margin-right: 8px;
    margin-left: 8px;
}

.bottom_ul li a {
    color: #f00;
    font-size: 12px;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="copyright">
    <div class="container">
        <div class="row">
            <div class=" col-md-6 text-center text-md-left">
                <p>© Copyright @DateTime.Now.Year.- LMS/US-LOG/OLNF/TM</p>
            </div>
            <div class="col-md-6">
                <ul class="bottom_ul d-flex justify-content-center justify-content-md-end">
                    <li><a target="_blank">GISSUB</a></li>
                    <li><a href="#">SGMAR</a></li>
                    <li><a href="#">Suporte</a></li>
                    <li><a href="#">Chamados</a></li>
                    <li><a href="#">Recursos</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>