Sign in Register
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
    Mark Roffey
    0

    Using a css grid in a custom property editor

    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
    Søren Gregersen
    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
    Mark Roffey
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies