CODEWITHSUNDEEP
htmlcssbootstrap-4
se6
se6

Reputation: 130

Bootstrap 4: Changing background color without affecting the container

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 class="vh-100 gradient">
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card-border-0 shadow rounded-2 my-5 mx-3">
                    <div class="card-header p-1 p-sm-3">
                        <h3>Client Management Portal</h3>
                    </div>
                    <div class="card-body p-4 p-sm-5">
                        {%include "components/alerts.html"%}
                        <form action="" method="post">
                            {%csrf_token%}
                            <div class="form-floating mb-3">
                                <label for="password">Username</label>
                                {{form.username}}
                            </div>
                            <div class="form-floating mb-3">
                                <label for="password">Password</label>
                                <div class="input-group form-floating mb-3">
                                    {{form.password}}
                                    <div class="input-group-append bg-white" id="">
                                        <span class="input-group-text" id="passwd">
                                            <i class="fas fa-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-grid">
                                <button class="btn btn-success">Login</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer p-2">
                        <a class="text-muted" 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>

Here's the screenshot of the problem

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

Upvotes: 1

Views: 1063

Answers (2)

Saad Rehman
Saad Rehman

Reputation: 79

you can write like this :

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

Upvotes: 0

Rafiul Islam
Rafiul Islam

Reputation: 319

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>

Upvotes: 1

Related Questions