How to put ul side by side?

Question

<div class="container-fluid gradient">
  <div class="row">
    <div class="col-12 justify-content-start text-white">
      <div class="footer mt-5">
        <img
          src="images/Vector Smart Object (Double Click to Edit).png"
          class="img-fluid footer-logo"
          alt=""
        />
        <div class="left">
          <ul class="mt-5">
            <li>TEAM</li>
            <li>COMPETITION</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li>FAQ</li>
            <li>POLICY PRIVACY</li>
            <li>COOKIES</li>
          </ul>
        </div>
      </div>
      <div class="border-pink"></div>
      <h4 class="mt-4 copy">COPYRIGHT</h4>
    </div>
  </div>
</div>

I want to put the ul next to each other so that they are side by side. I tried using inline-block and float left, but it looks messy.

You're already using `row` and `col-*` in your outer layout. Why not put the two ULs in another `row` and each of them in a `col-6`? — AKX, Nov 05 '21 at 12:20

score 0 · Answer 1 · edited Nov 05 '21 at 13:21

.left{
position:absolute;
padding-left:200px;
}

<div class="container-fluid gradient">
            <div class="row">
                <div class="col-12 justify-content-start text-white">
                    <div class="footer mt-5">
                        <img
                            src="images/Vector Smart Object (Double Click to Edit).png"
                            class="img-fluid footer-logo"
                            alt=""
                        />
                        <div class="left">
                            <ul class="mt-5">
                                <li>TEAM</li>
                                <li>COMPETITION</li>
                                <li>ABOUT US</li>
                                <li>CONTACT</li>
                            </ul>
                        </div>
                        <div class="right">
                            <ul>
                                <li>FAQ</li>
                                <li>POLICY PRIVACY</li>
                                <li>COOKIES</li>
                            </ul>
                        </div>
                    </div>
                    <div class="border-pink"></div>
                    <h4 class="mt-4 copy">COPYRIGHT</h4>
                </div>
            </div>
        </div>

You can do it like this. This is one way.

Or if your using bootstrap, make col-12 and then separate them into 2 col-6's — , Nov 05 '21 at 12:29

How to put ul side by side?

1 Answers1