@frankhoodbs/bootstrap-responsive-grid-cmp NPM

Bootstrap Responsive Grid Component

Component that renders a dynamic grid with custom slots. The number of rows and columns is determined by the given properties. Its appearance, especially the separators, is highly customizable via CSS variables.

Componente che visualizza una griglia dinamica con slot personalizzati. Il numero di righe e colonne è determinato dalle props fornite in input. Il suo aspetto, in particolare i separatori, è altamente personalizzabile tramite variabili CSS.

Version License

API Reference

Props

Name	Type	Description
`data-slots-number`	`string`	The number of slots that the grid should render.
`data-cols-per-row`	`string`	Number of the columns in each row. A different value at different step breakpoints is expected.

CSS variables

Name	default	Description
`--bootstrap-responsive-grid-row-gap`	`0`	Gap between rows
`--bootstrap-responsive-grid-separator-border-width`	`1px`	Width of the separator border between rows
`--bootstrap-responsive-grid-separator-inset-right-left`	`0`	Left and right values of the separator border between rows
`--bootstrap-responsive-grid-separator-border-style`	`solid`	Style of the separator border between rows
`--bootstrap-responsive-grid-separator-border-color`	`#000000`	Color of the separator border between rows

CSS theme classes

Name	Description
`.with-separator-between-rows`	If present on the component instance a separator is rendered between rows
`.with-separator-above`	If present on the component instance a separator is rendered above the first row
`.with-separator-below`	If present on the component instance a separator is rendered below the last row

Usage/Examples

<bootstrap-responsive-grid-cmp
  class="BootstrapResponsiveGridExampleCmp container with-separator-above with-separator-between-rows with-separator-below"
  data-slots-number="18"
  :data-cols-per-row="smAndDown ? '1' : mdOnly ? '2' : lgOnly ? '3' : '4'"
>
  <template v-for="n in 18" #[`slot-${n}`] :key="`slot-${n}`">
    <div
      style="
        background-color: red;
        height: 100%;
        min-height: 200px;
        padding: 10px;
      "
    >
      <p v-if="n === 3">
        Slot {{ n }}
        <br />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores
        assumenda corporis dolore, eaque earum fugit id ipsa magnam minima
        modi officiis perspiciatis praesentium, quae quos repellendus
        similique sint ullam. Nesciunt nulla quae quisquam quod. Accusantium
        cupiditate ex fugiat magni obcaecati perferendis perspiciatis quasi
        rem! Amet et possimus provident soluta vel.
      </p>
      <span v-else>Slot {{ n }}</span>
    </div>
  </template>
</bootstrap-responsive-grid-cmp>