import React from 'react'; import { Card, Col, Container, Row, } from 'react-bootstrap'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; // Import Content import UiContent from '../../../Components/Common/UiContent'; //import Components import BreadCrumb from '../../../Components/Common/BreadCrumb'; import { VerticalStartExample, VerticalCenterExample, VerticalEndExample, AlignSelfExample, HorizontalAlignExample } from "./UiGridCode"; import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; const UiGrid = () => { return (

Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix col- col-sm- col-md- col-lg- col-xl- col-xxl-
# of columns 12
Gutter width 1.5rem (0.75rem on each side of a column)
Custom gutters Yes
Nestable Yes
Offsets Yes
Column ordering Yes

Use align-items-start class to vertically align-items at the start.

col-sm-4
col-sm-4
col-sm-4

Use align-items-center class to vertically align-items at the center.

col-sm-4
col-sm-4
col-sm-4

Use align-items-end class to vertically align-items at the end.

col-sm-4
col-sm-4
col-sm-4

Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.

align-self-start
align-self-center
align-self-end

Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.

justify-content-start
justify-content-center
justify-content-end
); }; UiGrid.layout = (page:any) => export default UiGrid;