Starting out with Django and CSS, I've encountered an issue in my base.html file where I included a bootstrap cdn like this:
<meta charset="UTF-8">
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></code></pre>
<p>The challenge arises when I want to customize the css but can't do so directly on the cdn due to protocol restrictions. After trying suggestions from <a href="https://stackoverflow.com/questions/28305611/bootstrap-cdn-wp-how-to-edit-css/28306264">this thread</a>, added another line hoping it would override the cdn as shown below:</p>
<pre><code><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/bootstrap/css/style.css">Unfortunately, this method didn't work for me. I even tried placing the link in a local html file apart from base.html without success. My inquiries are:
- How can I effectively override the cdn file? And where is the best location to insert the additional css file (as I have static directories at both project and app levels)? Does the naming of the file matter?
- What is a simple yet reliable way to test if the override was successful?
- Mainly, I am seeking guidance on aligning two elements (such as an image and a menu) side by side rather than stacked. Despite referencing this post, I struggle to implement the required adjustments in the css file.
- Should the css links be placed where I indicated or within the meta section?