When I included the Bootstrap style file (bootstrap.min.css), it conflicted with my other styles and menu, which makes the page displays incorrectly. I have found this selector below in the Bootstrap CSS file causes the issue. If I download and store the bootstrap file locally, remove that code block, my page will work correctly. However, I will loss other useful options such as "glyphicon".
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
If I include the bootstrap files using CDN like this (which will mess up my page styles because of the above selector *{}), is there a way in my page <style></style> that can remove or disable that block of code above when it loads?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Thanks in advance,
Related
I have checked external css file doesn't work in Flask framework etc. other SO questions and my original Udemy source tutorial, but I still can't seem to get my Flask Boostrap app. to pick up my custom CSS file.
From base.jinja2 HTML template file:
{% include 'html_dependencies.jinja2' %}
</head>
<body>
Entire CSS test file in Source/static/css/style.css:
body {
background-color: yellow;
}
(This is test file, body does not change to yellow currently, therefore my CSS appears not to be loading.. I don't really want a yellow background if any style police reading!)
Complete HTML Dependencies file below code, which is loading the main bootstrap files fine, my custom CSS is last file, with url_for and static format syntax as I understand should be correct. Maybe I got the order wrong or some interference from one of Bootstrap files here? Also, I have problem with Bootstrap collapsed nav menu not functioning when window minimised, not sure if this is same cause, the standard lines in box icon shows for navigation when window is below cutoff width, but nothing happens when I click on it.:
<!-- Latest versions available at 31-8-17 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" -->
<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
I'm quite a Bootstrap newbie, any suggestions grateful.
I found it is the browser caching that is the problem. On the server this code works fine for me. In both IE and Chrome on my local computer, if I change the custom CSS code, it doesn't pick it up, unless I open code inspector in the browser, click on "Disable cache" option in the code inspector, and keeping code inspector window still open, then reload the localhost website. The below SO question finally sorted me out, and now I am downloading the Chrome extension Cache Killer as per second answer here, otherwise extremely irritating to have to open window and disable cache to check every change in custom CSS! Disabling Chrome cache for website development
I did also fix other mentioned error of collapsed menu issue was due to Bootstrap jQuery import line being below the Bootstrap min.js file. Opening the code inspection in browser showed this error, so moved jQuery line above js line and it loads properly.
Thanks again #senaps pointing me in right direction, confirming to me that posted code itself seems right.
Bootstrap includes some (very nice) styling for HTML inputs/selects/etc. However, for the project I'm on, they already have styling for these HTML elements that they want to keep.
Is there a way for me to turn off Bootstrap styles for inputs? Perhaps with some kind of css class? Or, do I have to override them manually?
The order of inclusion of the stylesheets can help you.The inclusion of bootstrap.css followed by your own stylesheets makes elements in your stylesheet to override those in bootstrap.
For example,
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<link type=text/css rel='stylesheet' href=/static/main.css><!-- custom stylesheet -->
For eg,
If the main.css contains
body
{
background-color:red;
}
And bootstrapp.css contains
body
{
background-color:blue;
}
The site will be with a red background.
I am using twitter bootstrap css framework. I have installed a local copy in /js folder of my application.
I have a piece of code in my home.php file:
<link href="../css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
Basically, it loads the css well, the span5 division works. But the nav bar does not seem to be appeared.
I think you need to also include the basic bootstrap.css file on the page as well as the bootstrap-responsive.css file.
See this example:
http://twitter.github.com/bootstrap/examples/fluid.html
I have trouble with less.js. Less.js itselfs works fine, but when i want to link other css styles, it seems to loaded them, but it doesnt works. There is problem witch cache probably.
there is generated code:
<link href="http://localhost/less/bootstrap.less" type="text/css" rel="stylesheet/less">
<link href="http://localhost/css/admin.css" type="text/css" rel="stylesheet/css">
<script src="http://localhost/js/less-1.2.2.js" type="text/javascript">
<style id="less:xxx:cz-web-static-less-bootstrap" type="text/css" media="screen">
<script src="http://localhost/js/head.min.js" type="text/javascript">
So what is in bootstrap.less it works, but what is in admin.css doesnt work.
strictly speaking, rel="stylesheet/css", isn't valid. But it's possible there are more problems. We'd need to see some examples of the code. If you are utilizing LESS's nested selectors - each nesting level will potentially override your css elements even if you are calling it after your less file.
More simple put:
#mybody #mydiv p a
{
style
}
which is potentially a very easy string to create with nested LESS structure - WILL override a
a
{
style
}
in your CSS.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.