can i use bootstrap in custom section in the back office - Extending Umbraco and using the API

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Ayo Adesina 430 posts 1023 karma points

Aug 03, 2017 @ 10:46
0

Can I use Bootstrap in custom section in the back office?

Extending Umbraco and using the API

Umbraco 7
I have create a custom dash bord for a custom section in Umbraco 7.

I can include my custom CSS file by adding the path in the package package.manifest as detailed in the Umbraco documentation here.

I now want to style this dashbord using bootstrap, but when I include boot strap it messes up the layout of the whole back office.

Is it possible I can use boot strap in this way?

My package.manifest file currently looks like this:
```
{
    "javascript":[
        /*javascript files listed here*/
    ],
  "css": [

    "~/app_plugins/Rewards/css/RewardsDashboard.css",
    "//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  ]
}
```
Copy Link
Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib

Aug 03, 2017 @ 11:15

0

Umbraco already pulls in Boostrap 2 CSS file. Basically, any CSS you add will added in addition to whatever Umbraco pulls in currently.

Not only that, but due to the way the backend is basically one big Angular module, then any CSS you add yourself will be applied to the entire Umbraco back-end. That is why it's best to only add custom classes with specific selectors that only target your own HTML - avoid anything generic.

Copy Link
Ayo Adesina 430 posts 1023 karma points

Aug 03, 2017 @ 12:26
0
OK...

So I can't pull in boot strap in this way, but if it is already pulling in bootstrap, why can't I do something like:
```
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div> 
```
In my view and it be displayed correctly, I tried referencing bootstrap.css from the Umbraco/Lib/bootstrap/css/ directory but that messed up the layout completely, also tried the cdn URL above which did work and only slightly messed up the UI.

Can I get boot strap only to target the view? It would just be nice to use some thing straight forward to layout the dash.

I'm not really a front ender so excuse my ignorance if this is a stupid question.
Copy Link
Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib

Aug 03, 2017 @ 12:41
1
Because Umbraco uses the older Boostrap 2 which has different class names for it's grid, unfortunately. So you'd need to use:
```
<div class="row">
    <div class="span4">.col-md-4</div>
    <div class="span4>.col-md-4</div>
    <div class="span4">.col-md-4</div>
</div> 
```
See http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Copy Link
Ayo Adesina 430 posts 1023 karma points

Aug 03, 2017 @ 12:45

0

Oh ok.. I get it now.

Thanks!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Can I use Bootstrap in custom section in the back office?