Question 393610 in Html Question posted in
Some basic documentation can be found here.

Html – Align li to right inside nav-tabs

I have nav-tabs aligned to the left, but I want she search bar and the logo (svg) to be aligned to the right side of the nav-tabs. I tried with text-align:right and float:right but that didn’t work. Is this maybe because of I use bootstrap, and how can I do this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sloppy music</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.4.1.css" rel="stylesheet">
    <link href="styles.css" type="text/css" rel="stylesheet">
    
  </head>
  <body>
      <div class="container">
        <div class="row">
      <div class="col-xl-12">
        <ul class="nav nav-tabs">
          <li class="nav-item"> <a class="nav-link active" href="#">Artists</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Playlists</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
          <li class="nav-item"> <a class="nav-link " href="#">Contact</a> </li>
            <li><input type="text" placeholder="Type text">
              <button type="button" class="btn btn-primary">Search</button>
            </li>
            <li><img src="images/sloppy.svg" class="img-fluid" width="50" id="logo"></li>
        </ul>
      </div></div>
      </div>
    </body>
</html>

I tried with text-align: right and float: right but that didn’t work.

Tags:

2

Answers


  1. 0

    You could try justify content. Your container will have to be set to flex I believe. Here’s some documentation on it. Let us know if it doesn’t work. I’m still learning myself

    https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

    Login or Signup to reply.
  2. 0

    Since the class "nav-tabs" uses display: flex you can use the CSS property flex-grow: 1 to automatically grow a span to fill empty space.

    <ul class="nav nav-tabs">
    <li class="nav-item"> <a class="nav-link active" href="#">Artists</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">Playlists</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
    <li class="nav-item"> <a class="nav-link " href="#">Contact</a> </li>
    <span class="flex-grow-1"></span>
    <li>
        <input type="text" placeholder="Type text">
        <button type="button" class="btn btn-primary">Search</button>
    </li>
    <li><img src="images/sloppy.svg" class="img-fluid" width="50" id="logo"></li>
</ul>

    Notice I added <span class="flex-grow-1"></span> between the last nav item, and the search bar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search