Bootstrap responsive space between navbar items

Question

I am working on a simple webapp with Bootstrap and I need to make the space between the navbar items responsive so that in smaller screens the navbar-items are close toghether but in larger screens they are further apart from each other.

Here is what i have done at the moment:

.title {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-size: 26px;
    line-height: 1.25;
}

.btn-bd-sign-in {
    font-weight: 600;
    color: white;
}

.btn-bd-sign-up {
    font-weight: 600;
    color: white;
    border-color: white;
}

.btn-bd-sign-up:hover {
    font-weight: 600;
    color: black;
    border-color: white;
    background-color: white;
}

.home-btn {
    font-weight: 600;
    color: white!important;
}

.home-btn:hover {
    font-weight: 600;
    color: #212529!important;
}

body {
    height: 100vh;
    background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}

button, button:active, button:focus {
    background: none!important;
    border: none;
}

button:hover {
    border-bottom: 3px solid #0275d8;
}

How can i achieve this feature?

This is how it looks at the moment:

On mobile devices it looks as expected but i would like on larger devices a little bit more spacing then what it is shown in the image.

user_1646240 · Answer

Your nav is limited to the container size of div. If you remove auto class and add w-100 to get the full width and add some flex classes, then nav can be stretched.

An example:

user_171456 · Answer

As you will see in the Bootstrap docs, the spacing utility classes (padding and margins) are responsive. For example...

px-lg-5 px-sm-3 px-1

responsively applies padding according to screen width...

large and up, 5 left/right padding units
sm and md, 3 left/right padding units
xs, 1 left/right padding unit

Therefore the same can be done with the nav-items...

Of course, you can change the p-{breakpoint}-{value} according to your needs.

Demo

Bootstrap responsive space between navbar items

2 Answers