Can't get bootstrap 4 navbar buttons to look right, when collapsed - html

Question

Is there a way to either style the buttons in my navbar only when its collapsed or change the buttons to text when collapsed, cause right now it looks fine normally, but when collapsed, the buttons are placed right underneath each other and are not the same width.
It's the last 2 buttons and searchbar that i need to somehow style or set margin for.
i have tried looking in the bootstrap documentation and guides on w3schools, but haven't been able to find any real solutions.
Sorry if this is not asked the correct way or i'm missing something, it's my first post.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="/">Hjem</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=new">Ny kunde</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=allcustomers">Vis alle kunder</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=settings">Opsætning</a>
</li>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-sm-2">
<a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
</li>
<li class="nav-item mr-sm-2">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
<div class="input-group-append">
<button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

A simple solution is to add the flex-row (flex-direction: row) class to the 2nd navbar-nav. This will allow the buttons and form to always layout horizontally (inline) in a row at all screen widths.
<ul class="navbar-nav flex-row">
<li class="nav-item mr-sm-2">
<a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
</li>
<li class="nav-item mr-sm-2">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
<div class="input-group-append">
<button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
</li>
</ul>
https://www.codeply.com/go/Wbc4kRGCtO

Answer 2

Try this :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="/">Hjem</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=new">Ny kunde</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=allcustomers">Vis alle kunder</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=settings">Opsætning</a>
</li>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-sm-2">
<a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
</li>
<li class="nav-item mr-sm-2">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
<div class="input-group-append">
<button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 3

There are specific ways to apply styles to the Bootstrap elements using their classes and stuff, but you can allways create a css file with the classes names and stylizing them from there if you feel like it.
It's not the rigth way, there are a bunch of ways you should try that are more correct thant this, but it works.