Change a footer that was in bootstrap 3 to Bootstrap 4

Question

Recently I switched to bootstrap 4, but some things crashed, my footer for example was one of them

<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="col-md-6" >
        <ul class="bottom_ul">
            <li><a></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>

.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;}

FOOTER

The menu should be on the far right. What changes should I make?

col divs should be inside of a row. Check this answer to a similar question: https://stackoverflow.com/a/42442346 — Lewis86, Nov 13 '18 at 09:28
Add the row, but now I'm going to need to align the divs, how would I do ?. I edited the original question with the screen shot of how it was. https://i.stack.imgur.com/en6GG.png — Jhensen, Nov 13 '18 at 13:31

score 0 · Answer 1 · answered Nov 13 '18 at 09:31

It should work if you remove the style{} selector.

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

<div class="copyright">
  <div class="container">
    <div class="col-md-6 ">
      <p>© Copyright @DateTime.Now.Year. Petrobras - LMS/US-LOG/OLNF/TM</p>
    </div>
    <div class="col-md-6">
      <ul class="bottom_ul">
        <li>
          <a></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>

The Style tag I accidentally put, its does not exist in the original — Jhensen, Nov 13 '18 at 13:01

score 0 · Answer 2 · answered Nov 13 '18 at 14:52

You need to put col divs inside a row div. To have an inline unordered list (ul) in bootstrap-4 you will need to apply the class list-inline to it and the list-inline-item class to its list items.

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

You can check the result here: https://www.codeply.com/go/yCF1H0dMPE

Change a footer that was in bootstrap 3 to Bootstrap 4

2 Answers2