How to use max-width inside of bootstrap rounded d-flex-CodePudding

I am trying to implement a login page using bootstrap like this:

But for some reason, the div I want to use to put a logo, can't be full width.

Clearly the w-100 it's not working properly.

How can I make this div full width?:

<div style="background-color:#193D4C;" class="w-100">
    <h3 class="text-light">Sign In</h3>
</div>

CodePudding user response：

So in the JSFidle is this line, the 5th line after the Body tag.

<div class="col-md-4 col-sm-12 shadow-lg p-5 bg-light">

p-5 is adding padding x5 to the main box. You can remove p-5 altogether to have no padding at all. Your heading should then stretch to the edges.

But then you will maybe want to put margin or padding on the other inner elements such as the form. This is because removing the p-5 will likely push those elements to the edge of the box also.

Here is your full BODY from JSFiddle. I have removed the p-5 padding and added p-3 padding to the Sign In Title and the Form. Hopefully this works :)

<body>
        <div class="container-fluid vh-100" style="margin-top:300px">
            <div class="" style="margin-top:200px">
                <div class="rounded d-flex justify-content-center">
                    <div class="col-md-4 col-sm-12 shadow-lg bg-light">
                        <div style="background-color:#193D4C;" class="w-100 p-3">
                            <h3 class="text-light">Sign In</h3>
                        </div>
                        <form action="" class="p-3">
                            <div class="p-4">
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-primary"><i
                                            class="bi bi-person-plus-fill text-white"></i></span>
                                    <input type="text" class="form-control" placeholder="Username">
                                </div>
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-primary"><i
                                            class="bi bi-key-fill text-white"></i></span>
                                    <input type="password" class="form-control" placeholder="password">
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Remember Me
                                    </label>
                                </div>
                                <button class="btn btn-primary text-center mt-2" type="submit">
                                    Login
                                </button>
                                <p class="text-center mt-5">Don't have an account?
                                    <span class="text-primary">Sign Up</span>
                                </p>
                                <p class="text-center text-primary">Forgot your password?</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
    ````