Adjusting Footer after migrating to Bootstrap 4

Navigation
1

I was using Boostrap 3 and I migrated to 4, but some things broke. I was able to resolve some, but I'm having trouble 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 do to leave these divs on the same line and the right div aligned right of the screen?

    
asked by anonymous 13.11.2018 / 14:16

1 answer

0

Your code has some problems.

First of all% copyright is not closed. Then your div class div is in the wrong place it should be before the first row , then you must use the same col-md-6 in the elements to be aligned ...

To adjust the text so that the first left is aligned in large screens and the other right in large screens you can use alignments in line-height to flex and with UL to text-align

Text alignment: link
Flex alignment: link

Itwouldlooksomethinglikethistorightandleftalignandthenonsmallscreensputseverythingcentralizedasintheimageabove.

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

View the result here: Display on "All Page" since you are using col-md-6 will only get two columns on the same line on screens larger than col-md 

.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>
    
13.11.2018 / 14:35
Random forest with very high accuracy How to run a hide with ajax