Change background color of Angular component

Danylo Kobzar 0
Viewed 52

I have problem to change background color in Angular component. My html code:

<section class="vh-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
  <div class="container h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-12 col-md-9 col-lg-7 col-xl-6">
        <div class="card" style="border-radius: 15px;">
          <div class="card-body p-5">
            <h2 class="text-uppercase text-center mb-5">Login</h2>

            <form>

              <div class="form-outline mb-4">
                <input type="email" id="form3Example3cg" class="form-control form-control-lg" />
                <label class="form-label" for="form3Example3cg">Enter email...</label>
              </div>

              <div class="form-outline mb-4">
                <input type="password" id="form3Example4cg" class="form-control form-control-lg" />
                <label class="form-label" for="form3Example4cg">Enter Password...</label>
              </div>


              <div class="d-flex justify-content-center">
                <button type="button"
                  class="btn btn-success btn-block btn-lg gradient-custom-4 text-body">Login</button>
              </div>

              <p class="text-center text-muted mt-5 mb-0">Haven't an account? <a [routerLink]="['/registration']"
                  class="fw-bold text-body"><u>Registration here</u></a></p>

            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

if i add class to "section" and change background color I have this: Image

Please tell me how to change the background color of the entire page

Second error: Helped Padding

bootstrap-4 css angular html
1 Answers

you can change the background color of a component by adding a class to a components css using :host, this targets the most top most div so if you want to change the background of the whole component youll have to add a full height and display property as u like

:host{
  display:block;
  background:red;
  height:100%;
}

Skipper pk0
Related