"Navbar bootstrap 4.0.0 multi rows align right with search"
Bootstrap 4.0.0 Snippet by olivierlabbe

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="fixed-top"> <div class=""> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-md-column" id="navbarSupportedContent"> <div class="input-group m-0 p-0 input-group-sm col-md-6 align-self-end"> <input type="text" class="form-control" placeholder="search" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">ok</button> </div> </div> <ul class="navbar-nav ml-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" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> </div> </div> <br/><br/><br/> StartTexte <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit nibh, mattis vitae accumsan vel, aliquam ut enim. Etiam consectetur ultrices ornare. Pellentesque lacinia mollis volutpat. Duis aliquet massa tellus, eu tincidunt lectus interdum iaculis. Sed et venenatis massa. Nulla ultrices laoreet sapien. Sed turpis tellus, malesuada sit amet pulvinar sed, scelerisque ac nibh. Suspendisse id metus arcu. Cras id elementum urna. Morbi auctor tempus turpis non varius. Praesent tristique magna at neque laoreet gravida. Vestibulum pharetra convallis mollis. Aliquam vel orci varius, congue orci ac, pulvinar orci. Integer consectetur ullamcorper quam a viverra. Proin et neque ac dolor imperdiet finibus. Phasellus interdum ligula sed ornare venenatis. Integer sodales faucibus pretium. Nunc purus massa, pulvinar id semper ac, hendrerit non ex. Ut bibendum tellus et urna aliquam, consectetur volutpat lacus fringilla. Morbi imperdiet consequat erat, sollicitudin accumsan lorem commodo in. Vestibulum porttitor massa interdum metus hendrerit molestie. In hac habitasse platea dictumst. Fusce fringilla lacus ut urna consequat maximus. Duis non convallis quam. Fusce sit amet auctor mi. Integer laoreet sapien id consectetur condimentum. Mauris et eros congue lectus bibendum consectetur sit amet vitae nisi. Quisque vitae condimentum velit, nec commodo mauris. In velit est, aliquet a sollicitudin ut, suscipit ac sem. Duis tempus, urna sed blandit maximus, purus orci tempus massa, vel elementum felis nunc in risus. Maecenas hendrerit in nibh vitae cursus. Mauris fermentum efficitur bibendum. Aenean lobortis luctus tellus, ac consectetur risus varius quis. Aenean at lacus eu ex consectetur finibus. Nunc semper ante quis augue pulvinar, sed imperdiet ante ornare. Maecenas bibendum dui et dolor maximus, et vehicula magna ullamcorper. Vivamus eu convallis orci, id laoreet purus. Suspendisse non arcu vitae massa ornare commodo. Praesent maximus vel leo sed egestas. Maecenas accumsan nisl ut urna elementum dictum. Sed nec tortor nec est auctor ullamcorper eu eget urna. Duis sapien lacus, scelerisque nec convallis quis, convallis sed enim. Pellentesque auctor mollis sapien, vitae dictum ante finibus non. Sed iaculis feugiat pharetra. Nam ut neque vel lacus placerat dictum id eu neque. Mauris pellentesque rutrum eleifend. Pellentesque porta dolor vitae tellus porta molestie. Suspendisse feugiat ac mi non accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit nibh, mattis vitae accumsan vel, aliquam ut enim. Etiam consectetur ultrices ornare. Pellentesque lacinia mollis volutpat. Duis aliquet massa tellus, eu tincidunt lectus interdum iaculis. Sed et venenatis massa. Nulla ultrices laoreet sapien. Sed turpis tellus, malesuada sit amet pulvinar sed, scelerisque ac nibh. Suspendisse id metus arcu. Cras id elementum urna. Morbi auctor tempus turpis non varius. Praesent tristique magna at neque laoreet gravida. Vestibulum pharetra convallis mollis. Aliquam vel orci varius, congue orci ac, pulvinar orci. Integer consectetur ullamcorper quam a viverra. Proin et neque ac dolor imperdiet finibus. Phasellus interdum ligula sed ornare venenatis. Integer sodales faucibus pretium. Nunc purus massa, pulvinar id semper ac, hendrerit non ex. Ut bibendum tellus et urna aliquam, consectetur volutpat lacus fringilla. Morbi imperdiet consequat erat, sollicitudin accumsan lorem commodo in. Vestibulum porttitor massa interdum metus hendrerit molestie. In hac habitasse platea dictumst. Fusce fringilla lacus ut urna consequat maximus. Duis non convallis quam. Fusce sit amet auctor mi. Integer laoreet sapien id consectetur condimentum. Mauris et eros congue lectus bibendum consectetur sit amet vitae nisi. Quisque vitae condimentum velit, nec commodo mauris. In velit est, aliquet a sollicitudin ut, suscipit ac sem. Duis tempus, urna sed blandit maximus, purus orci tempus massa, vel elementum felis nunc in risus. Maecenas hendrerit in nibh vitae cursus. Mauris fermentum efficitur bibendum. Aenean lobortis luctus tellus, ac consectetur risus varius quis. Aenean at lacus eu ex consectetur finibus. Nunc semper ante quis augue pulvinar, sed imperdiet ante ornare. Maecenas bibendum dui et dolor maximus, et vehicula magna ullamcorper. Vivamus eu convallis orci, id laoreet purus. Suspendisse non arcu vitae massa ornare commodo. Praesent maximus vel leo sed egestas. Maecenas accumsan nisl ut urna elementum dictum. Sed nec tortor nec est auctor ullamcorper eu eget urna. Duis sapien lacus, scelerisque nec convallis quis, convallis sed enim. Pellentesque auctor mollis sapien, vitae dictum ante finibus non. Sed iaculis feugiat pharetra. Nam ut neque vel lacus placerat dictum id eu neque. Mauris pellentesque rutrum eleifend. Pellentesque porta dolor vitae tellus porta molestie. Suspendisse feugiat ac mi non accumsan.

Related: See More


Questions / Comments: