bootstrap / jquery use

kyle shapiro asked on March 4, 2015 18:16

So I notice that on an example site like dancing goat, the css defines default stuff from bootstrap like .col-xs-12{width:100%} explicitly instead of using the normal col-xs-12 created by bootstrap CDN. Why is this? I also notice how if I try to use default bootstrap stuff like <button type="button" class="btn btn-primary btn-lg">Large</button> or <table class="table table-hover"> they will not work unless I write <link rel="stylesheet" href=""> <script src=""></script> <script src=""></script>

into the header of the master page. If I add these three CDN lines, the default bootstrap stuff will work, but the font and styling that I've done so far gets all out of wack. Elements move around the page and such. I read using custom jquery article, and it says that there is a jquery-core.js file somewhere that I might need to change, but I don't know the location of that file. In the past I have altered a javascript file for a bing map webpart, and the changes were only visible on my machine, not other machines accessing the site. But that might be a different question it it's own.

So what is the best way to do this? I may not need default bootstrap classes, but it seems backwards and wrong to manually define them all in the CSS.

Correct Answer

Charles Matvchuk answered on March 4, 2015 20:30

The back end Admin interface is not affected by including bootstrap, at least I have never seen any negative effect. Remember that our style sheets are processed in a top down hierarchy, so what I mean about over riding is that it will cascade.

Here is what I would do. Get the bootstrap CSS. Then in admin CSS interface create a new style sheet and call it Bootstrap. Copy and paste the vanilla bootstrap into the editor and click save. Now do over to Sites > edit your site and on the general tab select the bootstrap template for the Site CSS Style sheet.

Ok, now you will need to create or use another style sheet for over rides (use your existing CSS or create a fresh one). Once you do this and save it, look at the code name of the style sheet your just created. Go to your Master Page in the pages application (assuming your are using version 8+) and click on the Master page tab. It will show you the html. You should see a to the bootstrap style sheet you linked under site settings (this is the one you created and pasted the bootstrap into). Under that you will see a text area box. Please paste the following code in replacing "YourCustomCSSName" with the second style sheet you are using or created. Then click save. Now you will have the bootstrap CSS being used first and your override and additional modifications in the second style sheet cascading. Put your custom stuff in the second stylesheet. You can then always update the vanilla bootstrap css as new versions come out.

<link href="/CMSPages/GetResource.ashx?stylesheetname=YourCustomCSSName" type="text/css" rel="stylesheet" />

It is IMPORTANT in what order the CSS are in your website. They will cascade. If you link your over rides and custom CSS before Bootstrap, then Bootstrap will over ride and change it and you will get some weird results.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Charles Matvchuk answered on March 4, 2015 18:36

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="//" 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="//"></script>
<script type="text/javascript">
(function() { 
    if ("-ms-user-select" in && navigator.userAgent.match(/IEMobile\/10\.0/)) { 
        var msViewportStyle = document.createElement("style"); 
1 votesVote for this answer Mark as a Correct answer

kyle shapiro answered on March 4, 2015 19:59

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!

0 votesVote for this answer Mark as a Correct answer

Charles Matvchuk answered on March 4, 2015 20:34

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.

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on March 4, 2015 20:59

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.

0 votesVote for this answer Mark as a Correct answer

kyle shapiro answered on March 5, 2015 00:46

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.

0 votesVote for this answer Mark as a Correct answer

Charles Matvchuk answered on March 5, 2015 01:14

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.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.