CODEWITHSUNDEEP
htmlcssdjangodjango-templatesbootstrap-4
Maisha
Maisha

Reputation: 29

Unable to apply CSS, possibly because of Bootstrap

There are a lot of questions on StackOverflow that ask this question, but none of the solutions I've tried (i.e. personal stylesheet pasted below Bootstrap link, using a bootstrap-override id to add more weight to my selectors, forcing selectors) are working for me. I validated my CSS, so there are no stray semicolons or similar throwing it off. Also, strangely, the !important attribute does not override the styles.

I am building a site with Django. All of my pages are being extended from my "base_generic.html" file, and everything is linked to one stylesheet. When I make any change in my stylesheet, it isn't reflected on the html page. Even the most basic changes that have nothing to do with Bootstrap (e.g. changing font-size or color) of an HTML selector.

So, I thought maybe there was an issue with the link between my base-generic.html and my stylesheet. However, commenting out the link clearly makes a huge difference in the appearance of my page, so the stylesheet is definitely properly linked. I have no clue why my CSS is not being reflected on the page. I don't think it's a Bootstrap issue since making all the text in my p selector green shouldn't have anything to do with Bootstrap, but I'm not ruling it out. Any idea what's going on?

Edit: I didn't add code because it isn't much, but here's what I have:

My html page that extends from base-generic.html:

{% extends "base_generic.html" %}

{% block content %}

<h1><strong>{{room_name}}</strong></h1>

{% if room_name.status == 'g' %} <p>{{room_name}}'s status is <strong id="green-text">green</strong>.</p>{%elif room_name.status == 'y' %}<p>{{room_name}}'s status is <strong id="yellow-text">yellow</strong>.</p>{% elif room_name.status == 'r' %} <p>{{room_name}}'s status is <strong id="red-text">red</strong>.</p>{% endif %}

<p>{{room_name.details}}</p>

{% endblock content %}

And my CSS:

nav {  background-color: #07407b;  }

#nav-title {  color: white;  }

body {
  font-family: 'Varela Round', sans-serif;
}

.container {  padding-top: 5.5em; }

.card { padding-top: 5.5em; }

h1 {
  padding-bottom: 1em;
  padding-top: 1em;
  font-size: 1.5em;
  text-align: center;
}

#last-row { padding-bottom: 5.5em;  }

.navbar-brand { font-size: 1.75em; }

h2 {
  font-size: 1.2em;
}

#green-text {
  color: green;
}

Upvotes: 0

Views: 82

Answers (1)

Wariored
Wariored

Reputation: 1343

I do not think it's a Bootstrap issue. Maybe it's your browser(Service Workers SW). Right click inspect, go on your SW and select update on reload
Or just reload your page anytime you change a CSS file by: cmd+shift+R / ctr+shift+R

Upvotes: 1

Related Questions