Bootstrap columns not working as intended

Issue

I would like to create a menu with bootstrap but the ‘col’ class doesn’t seem to work as intended.
Here is the html code:

<div class="logo col">
   <a href="index.html"><img src="Content/Logo.png" class="logo"/></a>
</div>
<div class="menu col">
   <ul>
      <li><a href="index.html" class="GradientText">Accueil</a></li>
      <li><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
      <li><a href="Views/Contact.html" class="GradientText">Contact</a></li>
   </ul>
</div>

Both classes menu and logo are defined in my own css file.

Bootstrap 5.1.3 is used

Here is what it gives me:

Solution

Wrap it with a row class

Bootstrap 5 uses flex. row is the wrapper for column and provides display: flex property for columns to be sized accordingly.

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


<div class="row">
  <div class="logo col">
   <a href="index.html"><img src="https://via.placeholder.com/80" class="logo"/></a>
  </div>
  <div class="menu col">
     <ul >
        <li class="d-inline"><a href="index.html" class="GradientText">Accueil</a></li>
        <li class="d-inline"><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
        <li class="d-inline"><a href="Views/Contact.html" class="GradientText">Contact</a></li>
     </ul>
  </div>
</div>

Answered By – joohong89

Answer Checked By – Cary Denson (AngularFixing Admin)