Down button and center - Bootstrap 4

Question

Down button and center - Bootstrap 4

Navigation

#1 by (1 votes)

-1

I'm trying to create a layout with bootstrap 4 and for that I got an example of navbar on their site. The problem is that I would like to drop the mobile button on a new line and center, but I'm not getting it, I already used the .text-center, .mx-auto classes already tried to give a display: block; but it just will not go.

It's currently like this:

Iwantittolooklikethis:

Code:

<navclass="navbar navbar-toggleable-md navbar-inverse bg-inverse d-flex align-items-center">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navSuperior" aria-controls="navSuperior" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#"><div id="navLogo">LOGO</div></a>
            <div class="collapse navbar-collapse" id="navSuperior">
                <div id="navSearch">
                    <form class="form-inline d-flex p-2">
                        <input class="form-control" type="text" placeholder="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
                <div id="navMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>  
                </div>
            </div>
        </nav>

css bootstrap-4

asked by anonymous 27.08.2017 / 23:38

1 answer

How to create multiple variables of the same type without repeating conditions? Error Starting IIS Express Web Server - Error 0x80070020

score 1 · Accepted Answer

Testing in the mentioned example of the Bootstrap site, add the styles :

No <a> of LOGO:

style="display: block; width: 100%; text-align: center; margin: 0;"

No <button> :

style="margin: 0 auto;"

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script><navclass="navbar navbar-dark bg-dark">
      <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">LOGO</a>
      <button style="margin: 0 auto;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample01">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-md-0">
          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
        </form>
      </div>
    </nav>