-2

I know it might be a weird question but I really need to render two bootstrap versions in the same page. I am using Umbraco CMS which by default uses bootstrap version 2.x while my frontend pages use bootstrap 4. But I am using some widgets from bootstrap 4 like cards, carousels etc and to see the result in the umbraco dashboard I need to render bootstrap 4 css file in umbraco itself. In that moment the widgets render successfully but the umbraco dashboard is being modified by bootstrap 4 file and some things do not work as before.

Is there any way how can I render bootstrap 4 without breaking bootstrap 2 that umbraco uses. I am thinking to customize the bootstrap 4 including classes name etc but I don`t know if it possible and if there is an online website which can do this for me.

Any help on this problem would be much appreciated!

EDIT 1

Here are some images from what I am trying to describe:

So if create a custom grid layout field and renderd bootstrap 4 in there it overrides the umbraco default bootstrap as you can see from the blue names in the tree view.

enter image description here

I have to render bootstrap 4 in order to see properly the widgets I have added to grid layout as in the image below:

enter image description here

Rey
  • 3,663
  • 3
  • 32
  • 55

1 Answers1

1

Umbraco as a cms is frontend framework agnostic, by which I mean Umbraco does not use a specific frontend framework in the frontend code. You can use anything you want for it. When you install Umbraco out of the box (and choose not to install a starterkit) you start with a completely blank slate.

Are you perhaps modifying an existing website or have you installed a starter kit that uses bootstrap version 2? In that case it should be fairly straight forward to migrate version 2 to 4.

Updated answer

I now see you mean the grid layout system.

For the frontend: You are probably calling @Html.GetGridHtml("content") at the moment, you can plugin your own grid system here. Umbraco ships with support for bootstrap 2 and 3, but you can also implement bootstrap 4 yourself. If you take a look at the following folder: Views/Partials/Grid/ you'll see a bootstrap2.cshtml and bootstrap3.cshtml. You can add bootstrap4.cshtml yourself (you'll probably want to copy bootstrap3.cshtml and do some adjustments) and call it by changing the GetGridHtml call to @Html.GetGridHtml("content", "bootstrap4")

For the backend: I would be really careful to include the include the complete bootstrap stylesheet. This could change or break things in the umbraco backend. Personally when styling grid components in umbraco I try to give the content editor a basic idea of how it's going to look in the frontend and not the complete user experience. For this case I would create a seperate minimum stylesheet for the buttons to use in the grid editor.

Mark
  • 3,231
  • 3
  • 32
  • 57
  • Hi @Mark, thanks for your answer but what I am trying to say is a bit different. When you create a gridlayout you have an option to render css files inside of it, to show my components in grid layout I need to render bootstrap 4 but if I do so it will overrides umbraco bootstrap used for backend dashboard which I dont want to. Hope you get the point. I will add some images to clarify the situation as well – Rey Mar 24 '18 at 15:38