Python - ttkbootstrap widgets layout #1 pack

ttkbootstrap is a Python package that provides a theme extension for tkinter. It enables on-demand modern flat style themes inspired by Bootstrap1. The package comes with a built-in theme creator that allows you to easily build, load, explore, and apply your own custom themes1.

Some of the features of ttkbootstrap include:

• Over a dozen curated dark and light themes.
• Loads of beautiful pre-defined widget styles such as outline and round toggle buttons.
• Simple keyword API: Apply colors and types using simple keywords such as primary and striped instead of the legacy approach of primary.Striped.Horizontal.TProgressbar. If you’ve used Bootstrap for web development, you are already familiar with this approach using css classes.
• Lots of new Widgets: ttkbootstrap comes with several new beautifully designed widgets such as Meter, DateEntry, and Floodgauge. Additionally, dialogs are now themed and fully customizable1.

However, Tkinter and ttkbootstrap do not provide a separate GUI tool to specify the location of the widget. Therefore, the developer must create the widget directly in the desired location of the main window.

Like Tkinter, ttkbootstrap also uses pack, place, and grid to position widgets. Since pack, place, and grid provide various options, we will summarize the usage of these functions one by one.

pack

This is the easiest function to position widgets in ttkbootstrap. However, its functionality is limited, so it is not suitable for creating complex layouts.ttkbootstrap is a collection of modern flat themes inspired by Bootstrap. There are more than a dozen built-in themes, and you can also create your own.

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")

app.geometry("750x450")

frame = tb.Frame(app, bootstyle="primary", width=200, height=200)
frame.pack()

app.mainloop()

<basic_pack.py>

The following is the result of the above Python program. When the frame widget is positioned using the pack function, a frame of size 200

pack arguments

The pack function can have various arguments.

(variable) def pack(
    cnf: Mapping[str, Any] | None = {},
    *,
    after: Misc = ...,
    anchor: _Anchor = ...,
    before: Misc = ...,
    expand: int = ...,
    fill: Literal['none', 'x', 'y', 'both'] = ...,
    side: Literal['left', 'right', 'top', 'bottom'] = ...,
    ipadx: _ScreenUnits = ...,
    ipady: _ScreenUnits = ...,
    padx: _ScreenUnits | tuple[_ScreenUnits, _ScreenUnits] = ...,
    pady: _ScreenUnits | tuple[_ScreenUnits, _ScreenUnits] = ...,
    in_: Misc = ...,
    **kw: Any
)

<pack() function's arguments>

argument	usage	desc
after	after=other	Other must the name of another window. Use its container as the container for the content, and insert the content just after other in the packing order.
anchor	anchor=other	Anchor must be a valid anchor position such as n or sw; it specifies where to position each content in its parcel. Defaults to center.
before	before=other	Other must the name of another window. Use its container as the container for the content, and insert the content just before other in the packing order.
expand	expand=boolean	Specifies whether the content should be expanded to consume extra space in their container. Boolean may have any proper boolean value, such as 1 or no. Defaults to 0.
fill	fill=style	If a content's parcel is larger than its requested dimensions, this option may be used to stretch the content. Style must have one of the following values: none : Give the content its requested dimensions plus any internal padding requested with -ipadx or -ipady. This is the default. x : Stretch the content horizontally to fill the entire width of its parcel (except leave external padding as specified by -padx). y : Stretch the content vertically to fill the entire height of its parcel (except leave external padding as specified by -pady). both : Stretch the content both horizontally and vertically.
ipadx	ipadx=amount	Amount specifies how much horizontal internal padding to leave on each side of the content. Amount must be a valid screen distance, such as 2 or .5c. It defaults to 0. This value is mainly used in grid.
ipady	ipady=amount	Amount specifies how much vertical internal padding to leave on each side of the content. Amount defaults to 0. This value is mainly used in grid.
padx	padx=amount	Amount specifies how much horizontal external padding to leave on each side of the content. Amount may be a list of two values to specify padding for left and right separately. Amount defaults to 0.
pady	pady=amount	Amount specifies how much vertical external padding to leave on each side of the content. Amount may be a list of two values to specify padding for top and bottom separately. Amount defaults to 0.
side	side=side	Specifies which side of the container the content will be packed against. Must be left, right, top, or bottom. Defaults to top.

Layout changes depending on argument value

padx is only valid if side is "left" or "right". Likewise, pady is only valid if side is "top" or "bottom".

fillx is only valid if side is "top" or "bottom". Likewise, filly is only valid if side is "left" or "right".

Multiple widgets layout changes depending on argument value

The following is a simple Python code that creates two frame widgets and tests the layout.

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")

app.geometry("750x450")

frame = tb.Frame(app, bootstyle="primary", width=100, height=100)
frame.pack()
frame2 = tb.Frame(app, bootstyle="warning", width=100, height=100)
frame2.pack()
frame3 = tb.Frame(app, bootstyle="success", width=100, height=100)
frame3.pack()
app.mainloop()

<multiple widgets layout>

The following is the result of the above Python program. The default value of the side argument of the pack function is 'top'. Therefore, if the side value is not specified, the widgets are placed vertically from the top.

side and anchor argument

side specifies the side of the parent widget where the widget should be placed. It can take one of the following values: TOP, BOTTOM, LEFT, or RIGHT. For example, side=LEFT places the widget on the left side of the parent widget.

anchor specifies the position of the widget inside the space allocated to it by pack(). It can take one of the following values: N, NE, E, SE, S, SW, W, NW, or CENTER. For example, anchor=W aligns the widget to the left of the space allocated to it.

In summary, side controls the placement of the widget relative to the parent widget, while anchor controls the placement of the widget inside the space allocated to it by pack(). 

Left in side and w(west) in anchor mean the same direction. If you use these two together, the widget will be located on the left side of the parent window.

Specify layout in relative positions in two widgets

The after argument selects the location based on the area of the parent window remaining after the widget specified in after is created. The before argument selects the location based on the area of the parent window before the widget specified in before is created. You can think of it as controlling the pack order specified in after and before.