CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Sabir Hossain
Sabir Hossain

Reputation: 1205

DIV tag not showing all elements inline

I'm trying to create a navbar using Bootstrap 4 but in my div tag items are not inline and I can't align my nav item to right

here is HTML

<nav class="navbar navbar-inverse ">
        <div style="display:inline">
            <ul class="nav navbar">
                <li>
                     <button id="sidebarToggle" class="btn btn-primary">
                         <i class="fa fa-angle-double-left"></i>
                     </button>

                </li>
            </ul>
            <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color:cornflowerblue">The World</a></span>
            <ul class="nav navbar">
                <li>
                    <a href="#" class="btn btn-sm btn-info">
                        <i class="fa fa-save"></i>Save
                    </a>
                </li>
            </ul>
        </div>
    </nav>

And here is result error

Upvotes: 1

Views: 102

Answers (1)

VXp
VXp

Reputation: 12068

Just change the inline styling (if you prefer to do so) to:

<div style="display: flex; justify-content: flex-end; align-items: center">


<nav class="navbar navbar-inverse ">
  <div style="display: flex; justify-content: flex-end; align-items: center">
    <ul class="nav navbar">
      <li>
        <button id="sidebarToggle" class="btn btn-primary">
          <i class="fa fa-angle-double-left"></i>
        </button>
      </li>
    </ul>
    <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color: cornflowerblue">The World</a></span>
    <ul class="nav navbar">
      <li>
        <a href="#" class="btn btn-sm btn-info">
          <i class="fa fa-save"></i>Save
        </a>
      </li>
    </ul>
  </div>
</nav>

Where display: flex makes the div responsive and displays the children inline by default, justify-content: flex-end aligns ul's horizontally to the right and align-items: center centers them vertically inside that div.

A suitable solution to your problem would also be:

<nav class="navbar navbar-inverse">
  <div style="text-align: right">
    <ul class="nav navbar" style="display: inline-block">
      <li>
        <button id="sidebarToggle" class="btn btn-primary">
          <i class="fa fa-angle-double-left"></i>
        </button>
      </li>
    </ul>
    <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color: cornflowerblue">The World</a></span>
    <ul class="nav navbar" style="display: inline-block">
      <li>
        <a href="#" class="btn btn-sm btn-info">
          <i class="fa fa-save"></i>Save
        </a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions