Boostrap Grid#

class Column(*blocks: Block, base_width: Optional[int] = None, viewport_widths: Optional[Dict[str, str]] = None, alignment: Optional[str] = None, self_alignment: Optional[str] = None, **kwargs)[source]#

Bases: Block

This widget implements a col from the Bootstrap Grid system.

This is primarily meant to be used with Row.

Note

You can actually use Column objects outside of a Row. This allows you to specify a particular width for the block within a page. See Boostrap: Columns, Standalone Column Classes.

Parameters:

*blocks – a list of Block objects or string to add to this column

Keyword Arguments:

base_width – the base width of this block for all viewports. This will be converted to a col-{base_width} CSS class. If this is not supplied and base_width is None, add col as our CSS class.
viewport_widths – a dict where the keys are Bootstrap viewport sizes (e.g. sm, xl) and the values are column widths, again between 1 and 12 inclusive, or “auto”. These will be converted to CSS classes that look like col-{viewport}-{width}
alignment – how to align items within this column. Valid choices: start, center, end, between, around, evenly. See Bootstrap: Flex, justify content. If not supplied here and alignment is None, do whatever aligment Bootstrap does by default.
self_alignment – how to align this column vertically within its containing row. Valid choices: start, end, center See Bootstrap Columns

Raises:

ValueError – there was a problem validating one of our settings

check_alignments() → None[source]#

Check that our supplied alignment and self_alignment settings to ensure they are valid values from ALIGNMENTS and SELF_ALIGNMENTS, respectively.

Raises:: ValueError – an alignment was not valid

check_widths() → None[source]#

Validate our supplied width and viewport_widths settings to ensure widths for every viewport are between 0 and 12 inclusive, or (in the case of viewport specific widths).

Raises:: ValueError – a width was out of range

ALIGNMENTS: List[str] = ['start', 'center', 'end', 'between', 'around', 'evenly']#: The valid column content alignments

SELF_ALIGNMENTS: List[str] = ['start', 'center', 'end']#: The valid self vertical alignments with our row

alignment: Optional[str] = None#

start, center, end, between, around, evenly. See Bootstrap: Flex, justify content. If not supplied here and alignment is None, do whatever aligment Bootstrap does by default.

Type:: How to align items within this column. Valid choices

base_width: Optional[int] = None#: A column width between 1 and 12 inclusive. This is the base width for all viewports

self_alignment: Optional[str] = None#

start, end, center. See Bootstrap: Columns, Alignment

Type:: How to align this column vertically within its containing row. Valid choices

viewport_widths: Dict[str, str] = {}#

sm, xl) and the values are column widths, again between 1 and 12 inclusive, or “auto”

Type:: A dict where the keys are Bootstrap viewport sizes (e.g. #

class Row(*columns: Block, horizontal_alignment: Optional[str] = None, vertical_alignment: Optional[str] = None, **kwargs)[source]#

Bases: Block

This widget implements a row from the Bootstrap Grid system.

As columns are added to this Row, helper methods are also added to this row instance, named for the Column.name of the column. See _add_helper_method for details on how the helper methods will be named.

Parameters:

*columns – one or more Column objects

Keyword Arguments:

horizontal_alignment – the horizontal alignment for the columns in this row. See Bootstrap: Columns, Horizontal Alignment. Valid choices: start, center, end, around, between, evenly.
vertical_alignment – the vertical alignment for the columns in this row. See Bootstrap: Columns, Vertical Alignment. Valid choices: start, center, end.

Raises:

ValueError – there was a problem validating one of our alignments

add_column(column: Column) → None[source]#

Add a column to this row to the right of any existing columns.

Note

A side effect of adding a column is to add a method to this Row object like so:

def add_to_column_name(widget: Widget) -> None:

where column_name is either:

the value of column.name, if that is not the default name

Parameters:: column – the column to add

add_to_column(identifier: Union[int, str], block: Block) → None[source]#

Add widget to the column named identifier at the bottom of any other widgets in that column.

Note

If identifier is an int, identifier should be 1-offset, not 0-offset.

Parameters:

identifier – either a column number (left to right, starting with 1), or a column name
block – the Block subclass to append to this col

check_alignments() → None[source]#

Check that our supplied horizontal_alignment and verttical_alignment settings to ensure they are valid values from HORIZONTALALIGNMENTS and VERTICAL_ALIGNMENTS, respectively.

Raises:: ValueError – an alignment was not valid

block: str = 'row'#: block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

property column_names: List[str]#

Return the list of Column.name attributes of all of our columns.

Returns:: A list of column names.

columns: List[Block] = []#: A list of Column blocks to add to the this row

horizontal_alignment: Optional[str] = None#: the horizontal alignment for the columns in this row. See Bootstrap: Columns, Horizontal Alignment

vertical_alignment: Optional[str] = None#: the vertical alignment for the columns in this row. See Bootstrap: Columns, Vertical Alignment

class TwoColumnLayout(left_column_width: Optional[int] = None, left_column_widgets: Optional[List[Block]] = None, right_column_widgets: Optional[List[Block]] = None, **kwargs)[source]#

Bases: Row

This widget is a convenience widget that implements a two column row from the Bootstrap Grid system with two named columns: left and right.

On viewports less than size md, both columns will take up the entire width of the page (so that we look readable on portrait phones).

Set the column widths for viewport md and above, define left_column_width as a class attribute or keyword argument, where 0 < left_column_width <= 12. The default is to make the two columns equal widths.

Example:

>>> left_blocks = [Block('One', name='one'), Block('Two', name='two')]
>>> right_blocks = [Block('Three', name='three'), Block('Four', name='four')]
>>> layout = TwoColumnLayout(
        left_column_width=3,
        left_column_blocks=left_blocks,
        right_column_blocks-right_blocks
    )

To add a block to a column after creating the TwoColumnLayout:

>>> layout.add_to_left_column(Block('Five', name='five'))
>>> layout.add_to_right_column(Block('Six', name='six'))

Keyword Arguments:

left_column_width – the width of the left column, where 0 < left_column_width <= 12. The right column will have its width set automatically based on this.
left_column_widgets – A list of blocks to add to the left column
right_column_widgets – A list of blocks to add to the right column

left_column_widgets: List[Block] = []#: A list of blocks to add to the left column

left_column_width: int = 6#: The width of the left column, where 0 < width <= 12. The right column will have its width set automatically based on this.

name: str = 'two-column'#: The CSS class that will be added to this element to as an identifier for this kind of block

right_column_widgets: List[Block] = []#: A list of blocks to add to the right column