Sign in
Log inSign up

CSS is not being applied correctly in Angular

Marvin Dick's photo
Marvin Dick
·May 20, 2018

I'm currently recreating a very basic website I implemented in React beforehand in Angular. However, after getting the logic and the template working correctly, I immediately noticed that the CSS is not being applied correctly, with only small parts working.

Here's the template:

<div className="container text-center">
  <h2>Konzerte</h2><br/><br/><br/>
  <div class="row">
    <div class="col-sm-4" *ngFor="let concert of concerts">
      <a className="concertItem" href="#">
        <p><strong>
          {{concert.name}}
        </strong><br/>
        </p>
        <img class="concertImg" src="assets/bandmember.jpg" alt="Random Name" width="150" height="150">
      </a>
      <p>
        {{concert.events[0]}}<br/>
        {{concert.events[1]}}
      </p>
    </div>
  </div>
</div>

And here are the styles:

.container {
  margin-top: 6em;
  margin-bottom: 6em;
  padding: 40px 120px;
  background: lightgrey;
  border-radius: 24px;
}

a.concertItem {
  text-decoration: none;
  color: black;
}

.concertImg {
  border: 10px solid transparent;
}

.concertImg:hover {
  border-color: darkgrey;
}

I'm also using bootstrap in my index.html. I'd imagine it would have something to do with loading order, but I'm not sure how to fix it. Stuff like the grey border on hover works, but the entire site is not centered and for example the background is missing.

Thanks in advance for any suggestions!

5