CODEWITHSUNDEEP
htmlcssasp.net-mvcbootstrap-4
BraGcobs
BraGcobs

Reputation: 43

How to align div to right using bootstrap?

I have a layout_cshtml, now my challenge is the aligning on my div its on the left and not showing well both search and dropdownlist. I need some help below to the logic its not aligning well yet its not good for the user experience including my nav is not showing at all to the Interface no errors at all, please help me based on what i have attempted.

//View
<nav>
        <ul class="nav">
            <li><a href="@Url.Action("People")">People</a></li>
            <li><a href="@Url.Action("Modules")">Modules</a></li>
            <li>
                <a href="@Url.Action("Files")"></a>
                <ul class="sub-menu">
                    <li><a href="@Url.Action("Files")">Files</a></li>
                    
                </ul>
            </li>
        </ul>
    </nav>



    <center>
        <div class="form-group row">
            <li class="static ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true">
                <a href="#tab-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Everyone</a>
            </li>
            <form class="form-group ml-3">
                <div class="input-group input-group-sm">
                    <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-navbar" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
            <!--DropdownlistFor-->
            @Html.DropDownList("eNtsaRegLists", new SelectList(ViewBag.eNtsaRegListsEnum, "Value", "Text"))
        </div>
    </center>

Upvotes: 0

Views: 1055

Answers (1)

GerryMM88
GerryMM88

Reputation: 191

I was not sure what <div> you wanted to move, and I did not understand the point with adding <nav> when you dont have a div there.

Anyway here is an example on how you can do it. I have used the float-class in bootstrap (https://getbootstrap.com/docs/4.0/utilities/float/)

  <div class="form-group row float-right">
    <li class="static ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true">
      <a href="#tab-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Everyone</a>
    </li>
    <form class="form-group ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

  </div>

Codepen: https://codepen.io/cbrown___/pen/yLOqNym

By the way you should make the codepen, not we who you want help from.

EDIT: Removed <center>

Upvotes: 1

Related Questions