CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Sergiu Antal
Sergiu Antal

Reputation: 57

How to make nav wider css

I have this footer and inside I've got a nav that I am trying to make a both top navbar and footer sidebar I would like to have them a little wider. How to achieve this?

<footer class="footer">

<div class="container" id="maincontainer">
    <nav class="navbar navbar-expand-lg bg-success navbar-dark">
        <a class="navbar-brand">
            <i class="fas fa-car-crash"></i>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="home" asp-action="index">| Registered Brokers |</a>
                    </li>
                </ul>
            </div>
    </nav>
</div>

enter image description here

Upvotes: 0

Views: 161

Answers (2)

Tommy
Tommy

Reputation: 2453

The width is defined by Bootstrap's .container. You can also replace it by .container-xl or something similar to modify the behavior on different viewpoints. Please have a look at this table, which was retrieved from the above posted link:

Table with .container behavior for different device's width

To add another maximum width for large devices > 1200px (have a look at the different media queries here), you need to add a custom class like .custom-container and overwrite the max-width accordingly to your wished width like this:

<div class="container custom-container" id="maincontainer">
    <nav class="navbar navbar-expand-lg bg-success navbar-dark">
        <a class="navbar-brand">
            <i class="fas fa-car-crash"></i>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="home" asp-action="index">| Registered Brokers |</a>
                    </li>
                </ul>
            </div>
    </nav>
</div>

@media(min-width:1200px) {
    .custom-container {
        max-width: 1200px !important; // Your custom value
    }
}

If you always want to define the width to 100% of the window, replace .container by .container-fluid.

Upvotes: 1

Sergiu Antal
Sergiu Antal

Reputation: 57

.container-fluid {
width: 80% !important;

}

This helped me.enter image description here Thanks to @shahryar-mohajer

Upvotes: 0

Related Questions