TTT Design & Education All rights reserved
Container
Auto-layout columns
Containers provide a means to center and horizontally pad your site’s contents. Use Container for a responsive pixel width.
When no column widths are specified the Col component will render equal width columns.
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
Variable width content
Set the column value (for any breakpoint size) to "auto" to size columns based on the natural width of their content.
Responsive grids
The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify the amount of columns to span, or set auto layout widths.
1 of 2
1 of 2
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
3 of 3
Variable width content
1 of 3
3 of 3
Variable width content
sm=8
sm=4
sm=true
sm=true
sm=true
xs=12 md=8
xs=6 md=4
You can also mix and match breakpoints to create different grids depending on the screen size.
xs=6 md=4
xs=6 md=4
xs=6 md=4
xs=6
xs=6
First, but unordered
Second, but last
Third, but second
You can use the order property to control the visual order of your content.
Third, but first
Second, but unordered
First, but last
The order property also supports first (order: -1) and last (order: $columns+1).
md=4
md={{ span: 4, offset: 4 }}
md={{ span: 3, offset: 3 }}
md={{ span: 6, offset: 3 }}
md={{ span: 3, offset: 3 }}
For offsetting grid columns you can set an offset value or for a more general layout, use the margin class utilities.
Setting column widths in Row
1 of 2
1 of 2
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
The Row lets you specify column widths across 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can specify the amount of columns that will fit next to each other. You can also specify auto to set the columns to their natural widths.
Note that Row column widths will override Col widths set on lower breakpoints when viewed on larger screens. The <Col xs={6} /> size will be overriden by <Row md={4} /> on medium and larger screens.
Grid
Use Tips
1. Open Create Guides.. In tool panel.
2. Create a guide for the design system or a custom guide.
3. Delete unused guide lines.
Grid
Alerts
Accordion
Badges
Breadcrumbs
Buttons
Button groups
Cards
Carousels
Dropdowns
Figures
Forms
InputGroup
Images
Jumbotron
List groups
Modals
Nav
Navbars
Offcanvas
Overlays
Pagination
Placeholder
Progress bars
Spinners
Tables
Tabs
Toasts
Transitions
Layout
Components
Media
Stacks
Download
React-Bootstrap
Utilities
Login
Templates