two item does not align next to each other

user_14777930 0
Viewed 92

i am trying to my page responsive but when i inspect and look into mobile view they do align next to each on desktop that was fine but on mobile view it look like thatenter image description here

i wnat shopping carticon and button next to eachother so my navbar does not llok stretch her is my code

    <!-- navbar -->
<!-- Image and text -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #025;">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="{% url 'accounts:home' %}" style="font-size: 25px; font-weight:600;">
      <img src="{% static 'image/logo/logo.png' %}" class="d-inline-block align-text-center logo-img"
        style="margin-left: 150px; height: 40px;">
      BuyBuy
    </a>

    <div class="navbar-nav dekstop_search">
      <form class="form-inline" action="{% url 'products:search' %}">
        {% csrf_token %}
        <input class="search" type="search" placeholder="Search..." aria-label="Search" name="search" required>
        <button class="btn sea btn-outline-primary" type="submit" value="Search"><i class="fas fa-search text-white"></i></button>
      </form>
    </div>

<!-- Links -->
{% if user.is_authenticated %}

  <!-- Right -->
  <div class="navbar-nav">
    <a href="#" class="nav-link text-white text-center"><i class="fas fa-heart"></i>
      <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a href="#" class="nav-link text-white text-center"><i class="fas fa-bell"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <div class="dropdown">
      <img class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="height:50px; border-radius: 50%; margin-right:150px;"
        src="{{ user.profile.profile_pic.url }}">
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li class="item text-center" style="font-weight: bolder;"> Hi <strong
            style="color: #B9C04C; cursor:default;"> {{ user.username }}  </strong></li>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-center" href="{% url 'accounts:profile'  request.user.username %}">My Account</a>
        <a class="dropdown-item text-center" href="{% url 'orders:myorders' %}">My Order</a>
        <a class="dropdown-item text-center" href="#">My Address</a>
        <a class="dropdown-item text-center" href="#">My Cart</a>
        <a class="dropdown-item text-center" href="{% url 'accounts:logout' %}">Log Out</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-center" href="#">Settings</a>
        <a class="dropdown-item text-center" href="#">Help</a>
        <a class="dropdown-item text-center" href="#">Privacy Policy</a>
      </div>
      </div>
  </div>
    {% else %}
      <div class="navbar-nav">
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <a class="nav-link" href="{% url 'accounts:login' %}"><button type="button" class="btn btn-outline-primary text-white">Log In</button></a>
      </div>
    {% endif %}
  </div>
</nav>

any help will be appreciate i trie like display inline-block but doesn't have any effect.

bootstrap-5 css html
4 Answers

You can use display: flex on the parent <div>, like:

<div class="navbar-nav" style="display:flex">
user_169781010

Okay, so your problem is solved. That's great.

Looks like you are using Bootstrap-5, your code was having problem cause you were using lots of inline styles, not closing tag(s), Not using proper navigation menu structures. These were conflicting with Bootstrap.

You should always code by Bootstraps guidelines, otherwise your code won't work as you desire.

Now let me give you some suggestion to improve and optimize your code.

1. Try to avoid inline styles. Use Bootstrap classes to style your html elements.

**Example:**

    <span class="badge" style="background-color: white; padding:3px;">
        ....
    </span>

Change it to:

    <span class="badge bg-white p-1">
        ....
    </span>

Read: Bootstrap [Background Color][1], [Spacing][2], [Colors][3]

2. Use bootstrap's structure to organize your navigation links

    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link text-white text-center">
                <i class="fas fa-heart"></i>
                <span class="badge bg-white text-primary p-1">{{wish|length}}</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link text-white text-center">
                <i class="fas fa-bell"></i>
                <span class="badge bg-white text-primary p-1">{{wish|length}}</span>
            </a>      
        </li>
    </ul>
Read: [Bootstrap Navbar][4]

3. Make sure you close every tags. (In your code some tags are not closed.)

Admin1

Make sure to use flexbox which is provided in css.

user_170058930

Try using .className { display: flex; } property

user_160582440
Related