Bootstrap Like Grid

A grid system similar to the bootstrap's.

  • Container
  • Row
  • Column
  • Breakpoints

Post All Questions on StackOverflow, and tag @CatTrain (user:16200950)

https://stackoverflow.com/

Importing:

YAML:

bootstrap_like_grid: ^0.1.0

Dart:

import 'package:bootstrap_like_grid/bootstrap_like_grid.dart';

Container:

Used to contain rows and columns, can have a max breakpoint set, or be set to fluid. A max breakpoint of lg would make the largest the container can be lg (960px). Fluid makes the container the same width as it's parent, which is typically a MaterialApp. Fluid can't be used at the same time as a max breakpoint. Wrapping BSContainer in a SingleChildScrollView can resolve vertical overflow issues. Note that a max breakpoint of '' = fluid. Valid maxBreakPoint:

  • ''
  • sm
  • md
  • lg
  • xl
  • xxl
BSContainer(
    maxBreakPoint: "lg",
    children: <Widget>[],
),

BSContainer(
    fluid: true,
    children: <Widget>[],
),

Ref: https://getbootstrap.com/docs/5.0/layout/containers/

Row:

Used to format columns into a row, or a column on a breakpoint trigger. Children must be BSColum, because BSRow checks the breakpoint triggers of child BSColumns to determine wether to be a row or column.

BSRow(
    children: <BSColumn>[],
),

Column:

Uses breakpoints to calculate the width of the column. For example, a breakpoint trigger of col-6 would set the column width to 50% of the parent BSContainer. BSColumn must be the ancestor of a BSContainer (not required to be a direct child). The first column to be the full width of the BSRow, will cause the BSRow to change from a row to a column. For example, breakpointTrigger set to "col-md-6" would have the BSRow be a row when the size is md or greater, but when less than md the BSRow would become a column, because the BSColumn's width would be equal to the BSRow's. Valid breakpoint triggers are (case sensitive, ## <= 12 && ## >= 0):

  • col
  • col-##
  • col-sm-##
  • col-md-##
  • col-lg-##
  • col-xl-##
  • col-xxl-##
BSColumn(
    children: <Widget>[],
),

BSColumn(
    breakPointTriggers: <String>[
        "col-12",
        "col-md-6",
    ],
    children: <Widget>[],
),

BreakPoint:

A class with static methods and members, which holds definitions. The BSBreakPoints class is now a separate package; however, it is still exported by this package. See documentation here.

Libraries

bootstrap_like_grid