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
Related
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,
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.
Hello there ladies and gentlemen.
I've got quite the puzzler going on. I have just installed a fresh instance of Laravel (5.1) on a Vagrant (1.7.4) machine in Windows (10). The weird thing is that I'm linking both the external stylesheet and javascript the same way:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheets" type="text/css">
<script src="{!! URL::asset('js/all.js') !!}" type="text/javascript"></script>
The problem is that the styles are not being applied (cross-browser) to the elements. I'm not getting any errors in the console. When I look at the head of the document I can see that it's the right path:
<link href="http://laravel.dev/css/app.css" rel="stylesheets" type="text/css">
<script src="http://laravel.dev/js/all.js" type="text/javascript"></script>
I have a standard Laravel file structure with the CSS and JS folders inside the public folder. If I look at the sources tab inside Chrome developer tools, I can see that the JavaScript file is being loaded but there is no sign of the CSS file. But if I right-click on the link for the CSS file, and open link in new tab, I can see the CSS. I have tried explicitly changing the character encoding type to UTF-8 both as an attribute in the link tag as well as the first line of the css itself with the #charset 'at rule'. Here are some illustrations:
Thanks for your help.
In your css-link you have rel="stylesheets" (plural). It should be rel="stylesheet" (singular) :)
I am using Bootstraps glyphicons, including them like this:
<!-- Load Bootstrap CSS (Flatly) and Javascript -->
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Before I loaded the glyphicons CSS file my fonts were fine. I did not set the font, instead using whatever Bootstrap or jQuery sets the font by default.
Now I have included that glyphicon CSS file, my fonts have changed. Can I utilize the glyphicons whilst ignoring the fonts?
As you can see here http://www.bootply.com/5Amv5odg7X you don't need to load the glyphicons separately, just be sure to load stock Bootstrap before flatly, and you're good to go.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
Also, it's usually considered best practice load your .js files after all html content, so it doesn't impact page load.
You are using a custom version of Bootstrap css that already includes the icons and imports a custom Google font. Check the file you're linking to here:
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
This file contains all of the styles for the glyphicons embedded in it, so no need to separately add the link to the cdn for <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">.
As for you fonts "changing", the first line in this file imports the Lato font from Google and sets as the body font. If you don't want to use the custom font, download the flatly css file (instead of linking to the remote file) and remove the import statement at the top of the css file. Or, override the styles in your own css file. (Better to do the former, as it would be a waste to have your site visitors download the Google fonts, if you're not using them).