Default Kentico Bootstrap

Mahmoud Saghir asked on August 28, 2017 10:38

Hello,

I am using some tags that have classes from the default bootstrap files (/App_Themes/Default/bootstrap.css and ~/App_Themes/Default/bootstrap-additional.css). I noticed from the browser inspector that they are linked by default in every header in my website but the tags are not taking those classes.

So what should i do to solve this problem ?

Recent Answers


Prashant Verma answered on August 28, 2017 11:01

Hi Mahmoud, 1.Make sure master page/root you applied that default bootstrap css.

2.Make sure your page inherit master page template.

3.If you are using that tags in custom create user-control .ascx /.aspx pages then you must need to register it using below helper.

// Registers the default CSS CssRegistration.RegisterBootstrap(Page);

4.If you want to render any other CSS on page CssRegistration.RegisterCssLink(Page, "Default", "admin-common.css");

Thank

Happy to help you

3 votesVote for this answer Mark as a Correct answer

Mahmoud Saghir answered on August 28, 2017 12:52

Hi Prashant,

I applied the bootstrap css files in the master page header but the result is the same. I am working on creating custom filter so i added new Web User Control to the 'CMSGlobalFiles' folder. In the ascx file i added 'cms:DateTimePicker' control but the result on the page is not as expected because as i told you the bootstrap classes are not applied to the tags of this control. for example, the button of this control have 'icon-only btn-icon btn' classes but it didn't took the css changes.

0 votesVote for this answer Mark as a Correct answer

Prashant Verma answered on August 28, 2017 13:05

// Registers the default CSS on your filter page.

CssRegistration.RegisterBootstrap(Page);

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on August 28, 2017 14:02

If you want your site to utilize the default CSS (not recommended) then you need to manually include those CSS sheets on your site. You can do this simply by adding a HEAD HTML webpart to your page template and adding the links:

<link href="/App_Themes/Default/Bootstrap.css" rel="stylesheet" type="text/css">
<link href="/App_Themes/Default/Bootstrap-additional.css" rel="stylesheet" type="text/css">

Unfortunately, if these files are changed by Kentico, your site will also change.

A better solution might be to copy the design css you want from those other stylesheets and include them in your own stylesheet.

1 votesVote for this answer Mark as a Correct answer

Mahmoud Saghir answered on August 28, 2017 15:00

Ok thanks Prashant and Brenden

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on September 11, 2017 18:35

Brenden Kehren answered on August 28, 2017 14:02 - i don't think I agree with that statement. I am not loading the bootstrap in my page header /App_Themes/Default/, yet it is loading LAST overwriting my CSS which is causing problems. Something in Kentico seems to be adding that. I don't have a CSS sheet set so I don't know why or how but it definitely is.

I have the following head tags:

-->

yet my page source shows - note the last 3 lines: -->

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on September 11, 2017 18:36

really frustrating that this forum truncates your post

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on September 11, 2017 18:36

in the master page

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on September 11, 2017 18:37

I give up

0 votesVote for this answer Mark as a Correct answer

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