using a css grid in a custom property editor

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

Mark Roffey 31 posts 184 karma points

Apr 07, 2021 @ 09:54

Using Umbraco And Getting Started

Umbraco 8

Can anybody explain how I can add a grid layout into a custom property editor.

I thought that bootstrap.min.3.0.1 was being used, but doesn't work. Do I need to inject my own bootstrap version into it, or can I hook into Umbraco version?

<div class="container">
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<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>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
</div>

Copy Link

Søren Gregersen 441 posts 1884 karma points MVP 2x c-trib

Apr 07, 2021 @ 21:25
1
Hi,

I'm not really sure what flavour grid is used.

The classes are .row for 940px wide rows, .row-fluid for 100% wide rows .span1 to .span12 to for columns spanning 1 to 12 rows. .offset1 to .offset12 for offsetting columns 1 to 12 rows.
```
<div class="row-fluid">
    <div class="span3">3 column, no offset</div>
    <div class="span2 offset2">2 columns wide, 2 columns offset</div>
</div>
```
you can find the source here https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/lib/bootstrap/less/grid.less and mixins here https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/lib/bootstrap/less/mixins.less

HTH :)
Copy Link
Mark Roffey 31 posts 184 karma points

Apr 08, 2021 @ 08:30

0

Yeah comparing it to the bootstrap repo, looks like they've removed any grid code from their impementation (both 3.10 and 2.0.1 are referenced in Umbraco).

https://github.com/twbs/bootstrap/blob/v3.1.0/less/grid.less

https://github.com/twbs/bootstrap/blob/v2.0.1/less/grid.less

Copy Link
is working on a reply...

Please Sign in or register to post replies