HTML: как выровнять фразы в левом, центральном и правом нижнем колонтитуле. Bootstrap

Question

У меня проблемы с выравниванием текста нижнего колонтитула по прямой линии. Я здесь новичок, поэтому прошу прощения, если этот вопрос лишний! См. Ниже:

I need all three of those lines, to be in a straight line.

My professor teaches a grid method, but that's not working for me at the moment. Any suggestions?

Here is my code:

 img {display: block; маржа слева: авто; маржа-право: авто; }  Пользовательская страница ошибок    Страница не найдена   Что-то пошло не так!   404 Возможно, вы хотели бы посетить следующие страницы:   Веб-портфолио   Портфолио веб-разработки   © KoKo Kreations    Карта сайта   Мэри Ньюкирк       

Answer 1

.card .row {
    display: flex;
    justify-content: space-between;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

<div class="card">
        <div class="card-header" style = "background-color: #d8edd0">
            <h1><center>Page Not Found</center></h1>
            <h3><center>Something went wrong!</center></h3>
        </div>

    <div class="card-body">     
        <img src = "images/404.png" alt = "404" style="width:50%;"/> 
        <p style="text-align:center;">Perhaps you would like to visit the following pages:</p>
        <a href="http://cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/portfolio.php"><p style="text-align:center">Web Portfolio</p></a>
        <a href="http://cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/index.php"><p style="text-align:center">Web Development Portfolio</p></a>
    </div>

    <div class="card-footer">
    
    <div class="row">   
        <div class="col-md-4">
        <p style = "text-align: left;">&copy; KoKo Kreations</p>
        </div>
        
        <div class="col-md-4">
        <a href="http://cisstudent.uma.edu/~student800/WebPortfolio_After_Class_12/WebPortfolio/sitemap.html"><p style="text-align:center">Sitemap</p></a>
        </div>
        
        <div class="col-md-4">
        <p style = "text-align: right;"> Mary Newkirk </p>
        </div>  
        
    </div>
</div>