bootstrap / jquery use

I use Bootstrap extensively and over ride what I need. Plus I use multiple style sheets.

My master page head sections contains the following: Where the V3HODBootsrap I create from Bootstrap with Less variables to change the theme consistently through out. The other style sheets either over ride or have specifics. Then I modify the viewport since I don't want the user to move around the page on small devices, this way it looks and feels like an application on a smart phone rather than a browser. (Notice the fix for IEMobile). I also pick up my jquery from the cdn, rather than my web server. The whole thing works like a charm, and I don't have any issues. Also there where changes, so it will depend on what version of Kentico you are using to determine the jquery situation. Finally if you are using Bootstrap vanilla off the bootstrap cdn then you will have to over ride all styles that you modified depending on inheritance and the order of CSS Links etc. I choose to modify my bootstrap file and load it up into Kentico. That way future changes don't hurt me and I can customize them to exactly what I need. The LESS variables are a great way to go.

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
 <link href="/CMSPages/GetResource.ashx?stylesheetname=V3HODBootstrap" type="text/css" rel="stylesheet"/>
 <link href="/CMSPages/GetResource.ashx?stylesheetname=V3HODLayouts" type="text/css" rel="stylesheet" />
 <link href="/CMSPages/GetResource.ashx?stylesheetname=V3HODTheme" type="text/css" rel="stylesheet" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
<!-- 
(function() { 
    if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) { 
        var msViewportStyle = document.createElement("style"); 
        msViewportStyle.appendChild( 
            document.createTextNode("@-ms-viewport{width:auto!important}") 
        ); 
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle); 
    } 
})(); 
//--> 
</script>

Thank you Charles, I am sure that your solution is elegant and effective, but to be frank, it is over my head. I am new to Kentico, web development, and programming as a whole, so I am always striving to keep things simple as possible. You mentioned that if I wanted to use vanilla bootstrap, (and for the time being that would be great), I would have to override styles that I modified. How can I do this? Does including these 3 CDNs interfere with anything from default Kentico? Thanks again!

To go even further, since you are learning. When you are viewing your site, what I would do is use Mozilla Firefox, with the Firefly extension installed. When you click on the Firefly button it will bring up a second window pane where you can explore all of the different elements on the page and you will know what you need to do in order to override or change a style. Internet Explorer, you can hit F12 and use the Developer window. Just do these on the Live Site so you see the exact CSS Properties.

Couple items may help.

Firstly, the jquery-core.js file is located in the /CMSScripts/jQuery/jquery-core.js if you're on version 8+. The item in question (where you can use custom jquery) is available on 8.1, and forced on 8.2. So if you update your site to 8.2, by default the jquery-core.js is set to not overwrite the jQuery or $ variables. You can add your own jQuery to the header of the site and not worry about any conflict, i would HIGHLY recommend you do this.

Secondly, you can use a pre-existing Kentico template and try to fight against existing CSS and markup, but honestly it's pretty simple to 'start from scratch' and import a Bootstrap template yourself (include the css and if any js files in the header). Just head to the Page Templates and create a new master template, paste the template HTML header and footer (with a Page Holder in the middle), and have at it.

Thirdly, shameless plug, i created a Bootstrap layout tool, it's in the marketplace, if you import it you can design pages using bootstrap rows and columns, which should make designing your site and managing it a bit easier.

http://devnet.kentico.com/marketplace/web-parts/rows-columns-layout-web-parts-for-bootstrap

Thank you both for your responses. Charles, I now understand what you mean by overriding with the CSS sheets. I will definitely try this out on my site. I have used the IE and chrome developer tools to inspect elements before, but often forget to use that tool. Trevor, I will check out your layout tool, and I will add my own JQuery as you suggested, because I am on 8.2.

I have Trevor's layout tool installed and I have used it, it is nice and can be a time saver. I do, though, recommend that you understand on how the Bootstrap grid system works and how to manually create your rows, columns, pulls, nuances etc. This will make you a better designer/developer. Once you have that under control, then a web part like Trevor's is an excellent time saver, and you understand the mechanics of responsive design.

Don't hesitate to ask more questions if needed.