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">
Related
I am using two CSS frameworks in index.html, as follow
Materialize.css for Login/Sign In, and slick.css for rest of my website.
When frameworks are defined as:
Materialize.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Slick.css
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Then Output:
Home page Design
Login Page Design
If frameworks are defined as:
Slick.css
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Materialize.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Then Output:
Home page Design
Login page Design
But it implement last declare CSS framework on whole website.
how can I implement different CSS frameworks?
Usage of global style CSS/Javascript frameworks in modern frontend frameworks like React, Angular and Vue is possible, but highly discouraged.
If you want to, you can do it and there is nothing special you need to do for them to work.
Let's say you include Bootstrap in your web page and you want to use the button styles:
const SomeComponent = _props => (
<button className='btn btn-primary'>Hey I'm a button</button>
)
That's it. Now then, what happens if two global CSS use the same class? Like '.btn' for instance. In this case the last one to be included will win, and there's [pretty much] nothing you can do to solve the dilemma. This is the problem with global CSS and the reason modern projects avoid it at all costs.
A solution for this collision problem would be to use CSS-in-JS solution, in which we import CSS into a Javascript file and only use the CSS selectors and classes we need. This may work to some degree, but it still would ne a hack with associated limitations.
In practice, we only force the integration of vanilla JS libraries [with React] if they are very low level and there is no [good] adapter library for the specific frontend framework you are using (React, Angular).
This is where opinion-based part of the answer starts.
For Material design and React, it would make much more sense to use an implementation of Material design in React components, like Material-UI, which is much more easier to integrate with React than vanilla JS and CSS implementation of Material design like Materialize.
The same approach is similar for Slick. Google 'react carousel' and you'll get at least 2 good implementations of a carousel UI that you can easily integrate into a React project.
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.
I'm creating a web application without using bootstrap framework. But later I used the bootstrap carousal to my web application. Because I imported the bootstrap framework some of the styles I applied has changed, because different styles has been defined for those elements in bootstrap framework.
Now I want to add bootstrap framework only to the carousal section of my web application. So, I tried to change the order of the the link tags where I have imported the bootstrap framework and my custom style-sheet. But it didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" href = "css/main.css" type = "text/css"/>
Any help?
download bootstrap to your system and include bootstrap.css in your project and remove the conflicting classes from that file..
call that part in iframe with different webpage and links
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 attached css file following code my web site.I can display css style visual studio design time on my web page but when i run web project css style can not displayed.I use expolerer 8, and firefox 13.0.Also I can display css style my other web site project.What I forgot this web site? Thanks.
<link rel="Stylesheet" href="Themes/default.css" type="text/css" />
There is a handy helper in .net that will work out any path issues you may be having:
<link href="<%=Url.Content("~/Themes/default.css") %>" rel="stylesheet"
type="text/css" />
If you are not sure whether it is working, substitute your css file for something really simple:
body { background-color: Aqua; }
This will help to check whether the problem is:
The stylesheet isn't referenced
Or
The stylesheet is referenced, but is perhaps invalid / isn't doing what you expect