@frankhoodbs/bootstrap-responsive-grid-cmp

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.

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-row-align-items	normal	Align items on row
--bootstrap-responsive-grid-row-justify-content	normal	Justify content on row
--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>

Screenshots