sorry for the strange nature of this question however I was alerted to an issue and I can not find what has happened.
Overnight (04/02/2018) the styling of my react web application seemed to completely break. The nav bar no longer displays and the container alignment is no longer working, nor is the responsive aspect of the application. No code has changed during this time, and I can not see any errors when debugging or checking the console in IE,Chrome and FireFox.
Has this happened to anyone else? I have attempted to update the version of bootstrap the react app is using but this has not changed anything regarding this issue.
This is because now the latest bootstrap refers to v4 in the link https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css
You need to change your link to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css where you have been including stylesheet most probably /public/index.html or just search through files where you are importing bootstrap from cdn and change it to version 3(3.3.7 in my case), because react-bootstrap(Navs, NavItems or any other components ) uses bootstrap v3 css
Change this: ]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
to not lastes version, for ex.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Related
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
My bootstrap in ASP.NET MVC is up-to-date (v4.1.3). When I use dropdown components, it does not work properly!
Then I use: and comment out #Style.Render(~/Content/css)
It goes like this:
How could I fix this? (I have checked carefully the version of bootstrap in Content folder. It have no problems. As the same as the latest one I download from getbootstrap.com
today when I open my project, it's css style went wrong. Navbar is not show the style. Then I detected that bootstrap 4.1.3 (lastest version) is not supported with the auto-created layout of ASP.NET MVC (it is now using 3.3.7 as I remember). I think that I should edit the class style. But last, thanks for your answers.
It looks like your bootstrap or jQuery reference is not being read. Check your raw html output (right click on webpage and view page as source. Note Bootstrap requires jQuery.
Here is an example of a jQuery and bootstrap order loading on html page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
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.
Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
is there any compatibility issues i should be aware of ?
I have my webapp built with jquery mobile 1.4, yet for some pages bootstrap give me lot more control over css so that i can make my webapp also works for pc with wider views.
what i did was i used bootsrap custom builder to compile a version of bootstrap except for typographies, -because bs typography change the size of headers which mess jqm navbars and buttons.
i then included bootstrap on top of my css style sheets
<link rel="stylesheet" href="http://localhost/ehit/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/ehit/assets/css/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" href="http://localhost/ehit/assets/css/jquery.mobile.theme-1.4.3.min.css" />
so that jqm styles would have upper hand to overwrites what ever rules it want over bootstrap.
yet before i start diving deep and coding stuff. i was wondering is this enough to get them to play nice together or is there other issues i should fix first ?