Bootstrap columns not working as intended


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 class="menu col">
      <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>

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

Bootstrap 5.1.3 is used

Here is what it gives me: How it looks in Firefox


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="" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="row">
  <div class="logo col">
   <a href="index.html"><img src="" class="logo"/></a>
  <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>

Answered By – joohong89

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.