Unable to combine Bootstrap and custom CSS

Question

I'm using Flask and Bootstrap. I'm trying to combine my own custom CSS with some Bootstrap classes, and while I can apply Bootstrap classes to elements just fine, when I try to apply my own custom CSS, it doesn't always work. For example, I apply Bootstrap's text-center to a div, and it works. I then try to apply some custom CSS and either nothing happens, or only part of my CSS is applied. For example, color: red works but font-size: 100px does nothing.

This is driving me absolutely insane, and I've tried everything. My CSS loads after the Bootstrap CDN, and I'm using url_for in Flask to access the CSS file. I've also tried using !important but this does nothing. I don't know what else to try.

Importing CSS stuff in my base template:

<head>
    {% block head %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
{% endblock %}
</head>

In this next snippet, the Bootstrap classes all work. However, when I try to test some custom CSS with the red class, things start going wrong. The color: red property from my custom CSS works, but the font size change does not. I'm also not able to do anything custom with the image.

{% extends "base.html" %}

{% block content %}
<div class="header">
    <header class="text-center">
        <div>
            <img src="{{ logo }}" class="img-fluid">
        </div>
        <div>
            <p class="red">Text here.</p>
            <p>More text.</p>
        </div>
        <div class="buttons">
            <a href="{{url_for('about')}}" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
        </div>


    </header>
</div>


{% endblock %}

A bit of custom CSS

.red {
    color: red;
    font-size: 100px;
}

Have you checked if you have any inline styles overwriting style elements? Maybe try posting your code and we can have a better look at what's happening! — EGC, Nov 04 '19 at 22:22
Can you provide some specific code snippets? This could happen for many reasons. Make sure you're importing the custom stylesheet after the bootstrap stylesheet. Make sure the property you're trying to change isn't set to `!important` from bootstrap by default. Make sure you're changing the right element and not a parent/sibling. Etc... — Nick, Nov 04 '19 at 22:25
Where is your "bit of custom CSS"? Separate file? inside and ` — noslenkwah, Nov 04 '19 at 23:28
Sometimes you may have to use the `!important` keyword at the end of your css attributes, since bootstrap tends to have priority. Use it like `border: 1px solid black !important;` — pensum, Nov 05 '19 at 00:09

score 0 · Answer 1 · answered Nov 05 '19 at 00:05

I recommend using Inspector in browser to determine which styles are being applied to your elements.

Based on the code provided, the font-size rule is being applied properly.

https://jsfiddle.net/withn/5h4aft9d/3/

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
    .red {
      color: red;
      font-size: 100px;
    }
    </style>
  </head>
  <body>
    <div class="header">
      <header class="text-center">
        <div>
          <img src="#" class="img-fluid">
        </div>
        <div>
          <p class="red">Text here.</p>
          <p>More text.</p>
        </div>
        <div class="buttons">
          <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
        </div>
      </header>
    </div>
  </body>
</html>

There is more helpful information here: How can I override Bootstrap CSS styles?

score 0 · Accepted Answer · answered Nov 07 '19 at 02:31

0

I ended up solving my issue by switching browsers from Chrome to Firefox. I suspected that this was an issue with Chrome's cache, however the problem didn't go away after resetting the browser and clearing the cache.

answered Nov 07 '19 at 02:31

vcable

509
1
5
17

Unable to combine Bootstrap and custom CSS

2 Answers2