bootstrap_like_grid 0.1.1 icon indicating copy to clipboard operation
bootstrap_like_grid: ^0.1.1 copied to clipboard

A grid system similar to bootstrap

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.

3
likes
120
pub points
2%
popularity

Publisher

unverified uploader

A grid system similar to bootstrap

Documentation

API reference

License

Icon for licenses.GPL-3.0 (LICENSE)

Dependencies

bootstrap_like_breakpoints, flutter

More

Packages that depend on bootstrap_like_grid