1

I cannot get my custom css to override any of the components of Bootstrap4 in Django project.

I am very new to front-end development and hope that I can ask this question clearly. note: This is an html sheet in a Django project. My custom css sheet is linked properly as I can use it successfully on other components (non-bootstrap) of the page.

The only way I have been able to override any of my bootstrap components is by including the style as an html attribute as seen in the example below where I made the background of the first row blue. I have been working on solving this issue for a couple of days now and the only things I seem to find is to make sure your custom style sheet is loaded after the Bootstrap style sheet. I have my home.css sheet loading after the bootstrap css, but I am not sure if the way Django loads these is interfering with the order.

Any help or suggestions on trouble-shooting this would be greatly appreciated. Thank you. 

    {% load staticfiles %}
    <head>
      <!-- Bootstrap core CSS -->
      <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">  </head>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap" >
      <link rel="stylesheet" href="{% static 'css/home.css' %}" >
    </head>

    <body>
    <!--#################  START OF CARD  #################-->
            {% for product in products.all %}
            <div class="card-group">
            <div class="card mb-3">
    <!-- start second row -->
              <div id = "top" style = "background: blue;" class="row no-gutters">
                <div class="col-md-6 d-flex">
                  <div class="card-img-body">
                  <img src="{{ product.img_url }}" class="card-img img-fluid">
                </div>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                  <div class="card-body">
                    <h4 class="card-title text-center">{{product.title}}</h4>
                    <p class="card-text">{{product.body}}</p>
                    <p class="card-text text-right"><small class="text-muted">{{product.date_posted_pretty}}</small></p>
                  </div>
                </div>
              </div>
    <!-- start second row -->
              <div class="secondary row no-gutters d-none">
                <div class="col-md-6 d-flex align-items-center">
                  <div class="card-body">
                  <h6 class="card-subtitle text-center">{{product.product_name}}</h6>
                  <p class="card-text "><small class="text-muted">{{product.product_description}}</small></p>
                  </div>
                </div>
                <div class="col-md-6 d-flex align-items-center">
                  <div class="card-body text-center">
                  <a class="btn btn-light" href="#" role="button">Product</a>
                  <a class="btn btn-light" href="#" role="button">Homepage</a>
                  <a class="btn btn-light" href="#" role="button">Mission</a>
                  </div>
                </div>
              </div>
            </div>
            </div>
            {% endfor %}

    <!--#################  END OF CARD  #################-->
    </body>

And here is the css that I have tried, both selecting the class and the id.

    .row .no-gutters{
      background: blue;
    }

    #top {
      background: blue;
    }

After removing the style as the attribute, I would expect this css to override the bootstrap components however that is not the case.

Astik Anand
  • 12,757
  • 9
  • 41
  • 51
Brian
  • 113
  • 1
  • 5
  • UPDATE: So just to try one more thing I tried this by adding style in the header and it worked fine. So Im assuming that this means my custom CSS file is getting read in after the bootstrap. I could solve this issue by keeping all of my css in a style tag in my html, however I would really like to keep it separate. This also makes me think this might be a Django specific problem? – Brian Jul 22 '19 at 20:36

3 Answers3

1

First off, check your selectors.

.row .no-gutters is different than .row.no-gutters (no space)

The first is selecting elements with a class of .no-gutters that are descendants of elements with the .row class. The second selects elements with both the .row and .no-gutters classes.

Chris Schloegel
  • 71
  • 1
  • 3
  • Thanks this actually did help, and I was able to get this to work while keeping the css in a style tags in the header of my html page. Unfortunately this still won't work with my external css page. Thanks for your help – Brian Jul 22 '19 at 20:42
  • Are you entirely sure that your CSS file (home.css) is being loaded? – Chris Schloegel Jul 22 '19 at 23:21
  • I am, because I am able to effect other aspects that are not bootstrap components. Thanks. – Brian Jul 23 '19 at 14:05
0

have you tried going: 

background: blue !important;

While not best practice this should work. Conversely, try being more specific by going: 

.card #top { background: blue ;}

or

div #top { background: blue;}
Caleb
  • 572
  • 1
  • 7
  • 25
0

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements Internal - by using a element in the section External - by using an external CSS file

inline css gets the highest priority, hence Your Problem. to solve you need to solve the conflict by editing or removing the bootstrap styles

take a look here Customizing Bootstrap CSS template

Anshul
  • 1,495
  • 9
  • 17
  • Thanks for your comment. I was really hoping to not have to edit the actual bootstrap file at all. From what I have read I should be able to apply my custom css file to override the bootstrap file. That is where I am having difficulty. So both of the inline, and internal ways of adding css work fine here, where the external way does not. Thanks again. – Brian Jul 22 '19 at 20:40