Bootstrap 4: Changing background color without affecting the container-CodePudding

Hello i make login page for my website but it seems when changing the background it also change also the color of my div container? What should I do to fix this issue and only the background will change.

Here's my code written under Bootstrap 4.6:

<section >
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <h3>Client Management Portal</h3>
                    </div>
                    <div >
                        {%include "components/alerts.html"%}
                        <form action="" method="post">
                            {%csrf_token%}
                            <div >
                                <label for="password">Username</label>
                                {{form.username}}
                            </div>
                            <div >
                                <label for="password">Password</label>
                                <div >
                                    {{form.password}}
                                    <div  id="">
                                        <span  id="passwd">
                                            <i ></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div >
                                <button >Login</button>
                            </div>
                        </form>
                    </div>
                    <div >
                        <a  href="#">No account? register here</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    .gradient-custom {
    /* fallback for old browsers */
    background: #6a11cb;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #36D1DC, #5B86E5);
  
    /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    background: linear-gradient(to right, #36D1DC, #5B86E5)
  }
</style>

Thanks in advance! (edit : please dont mind the double curly braces, django template only thanks again)

CodePudding user response：

You just need to set the background color of the container class. Update your css like this

<style>
      .gradient {
        /* fallback for old browsers */
        background: #6a11cb;

        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, #36d1dc, #5b86e5);

        /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
        background: linear-gradient(to right, #36d1dc, #5b86e5);
      }

      .container {
        background: #fff; 
      }
 </style>

CodePudding user response：

you can write like this :

<div  style="background-color:white !important;">