Aligning two nav lists side-by-side

Question

What I'm trying to do is create a store-banner, one half with its contents aligned left, the other half with its contents on the right with space inbetween for resizing. I've attached an image to explain what I'm trying to do.

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

    <link rel="stylesheet" href="scss/custom.css">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <div class="container-fluid flex-nowrap topBanner" role="banner">
        <ul class="nav d-flex">
            <li class="nav-item">
                <a href="#" class="nav-link">1</a>            
            </li>
            <li>
                <a href="#" class="nav-link">2</a>            
            </li>
            <li>
                <a href="#" class="nav-link">3</a>            
            </li>
        </ul>
        <ul class="nav d-flex justify-content-end">
          <li class="nav-item">
              <a href="#" class="nav-link">4</a>            
          </li>
          <li>
              <a href="#" class="nav-link">5</a>            
          </li>
          <li>
              <a href="#" class="nav-link">6</a>            
          </li>
      </ul>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>
.topBanner {
  background-color: purple;
  text-align: center;
  width: 50%;
  position: relative;
}

trying to make banner like this

Answer 1

try adding this to your css:

  display: flex;
  justify-content: space-between;

May I remind you, when writing CSS inside an HTML document, you must use the style tag like so:

    <style>
    .topBanner {
        background-color: purple;
        text-align: center;
        width: 50%;
        position: relative;
        display: flex;
        justify-content: space-between;
    }

</style>

Answer 2

To do this on bootstrap , just add these two classes to container-fluid :

d-flex 
justify-content-between

Here:

<div class="container-fluid d-flex justify-content-between flex-nowrap topBanner" role="banner">
...

Aligning two nav lists side-by-side

Question

2 answers

solution1
1 2021-01-19 05:41:41

solution2
1 ACCPTED 2021-01-19 05:49:51

Aligning two nav lists side-by-side

Question

2 answers

solution1 1 2021-01-19 05:41:41

solution2 1 ACCPTED 2021-01-19 05:49:51

solution1
1 2021-01-19 05:41:41

solution2
1 ACCPTED 2021-01-19 05:49:51