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'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
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 ?
I'm using Foundation CSS framework and jqGrid to display data, but Foundation styles are messing with jqGrid/jquery UI styles...
I've tried a lot of changes and search, but I can't figure out how to do it...
Here is an example : http://jsbin.com/cocukube/1/
I would like the jqGrid to be displayed like that : http://jsbin.com/cocukube/2/
But of course, with all Foundation styles...
Thank you very much.
I would begin by taking a look at the order in which you're loading the CSS. In order to assure that Foundation is not overriding your jqGrid styles, make sure that jqGrid is being loaded after Foundation.
<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="jqgrid.css">
If that's not the issue, you might need to create an override.css file to essentially "undo" some of the styles that Foundation is applying. If this is necessary, make sure that your override.css file is called after the other two.
I am updating a website to add some mobile friendly pages.
At the moment we have one big css page with everything in. My idea is to put all the mobile specific css into a separate file and then link both sheets. The mobile css will overide anything in the default css (bigger buttons etc).
Im quite new to css, what is the best practice?
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
I have a few stylesheets for any significant app I've worked on.
base.css - always applied.
print.css - this hides menus and other parts of the screen not really good for a printed page. Triggered by the media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - applied second, and if and only if it's IE6. I hope to throw this out someday.
<clientname>.css - one stylesheet for each client that wants the site to have their logo/etc.
If I were trying for blazing fast performance, I'd combine them. However, I know sites getting hundreds of millions of hits a day don't bother, so I'd strongly recommend splitting them however makes sense to you, in order to make it easier to maintain.
For the most part, extra hardware is cheaper than extra developer hours and/or more bugs. Maintainability is usually the highest goal for me.
yes you should use more than one css file rather using one big file.
It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
In the case of styles for specific clients, I would say that it is a best practice to separate them.
Using separate stylesheets for different media is easily done.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In this case, all the style will be downloaded and applied when the media type matches the device.
However there is another method which is neat if your app is designed for mobiles, because it downloads the stylesheet ONLY if the media type matches.
<style type="text/css" media="screen">
#import "screen.css"; /* Note that some (older?) browsers don't support #import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
#import "mobile.css";
</style>
<style type="text/css" media="print">
#import "print.css";
</style>
I'd use two as well. Keeps things more tidy when editing for each device (computer and mobile device). I have one huge CSS stylesheet which I use for all browsers with the help of the css browser selector script, and I hate having to scroll through 6000+ lines of CSS, so I'd say the best way at least from experience is to separate them out!
Group your CSS meaningfully and serve it carefully.
For example, if you have CSS that is applied through out your site (e.g. CSS reset) make it separate file and include it for each page.
Then for each logical component of your site create separate CSS file and serve it on pages that belong to respective logical component. (Say you have a blog and polls on your site, if blog never needs CSS for polls you don't need to include it in blog.) But bare in mind this isn't practical for small sites.
Group your CSS by media for which they are used. If you have style sheet for printing keep it separate of your basic sheets if it makes sense (don't use separate files if you only have single CSS property for printing since it is not worth the request time).
Keep in mind that more sheets assume more HTTP requests and each request costs certain amount of time.
So there isn't explicit way these thing should be handled, it's all about making your CSS easier to maintain and easy for client to download (less HTTP requests, smaller size etc.)
I would use multiple style sheets to keep things better organized, then compress them into one file before putting them on the site, to improve performance.
You should have a range of CSS sheets for various tasks, else things get messy fast!
I think its better to use 1 for style, 1 for ie6 one for ie7. Nothing more.
Organization should be automatic inside the style.css. Using logical classnames and comments.
Less httprequests is good. Less markup is good. :)
I prefer two style sheets myself. The first one, and the one that always comes first in my HTML, is a reset style sheet. The implementation of this first style sheet helps web pages to display more consistently across different browsers.
Often, it is not necessary to create more than one additional style sheet. Generally, CSS commands specific to IE are ignored by Firefox and other compliant browsers and vice-versa. The real problem arises when an item on a page must be positioned and sized to be exactly the same across multiple browsers - at that point, more than two sheets become necessary although it is sometimes possible to get good results through proper ordering within the sheet.