Building web pages with Python, `markyp` , `markyp-html` and `markyp-bootstrap4`

Alerts and badges

Alert with primary context.

from markyp_html.text import h3
from markyp_bootstrap4.alerts import alert
from markyp_bootstrap4.badges import span_badge

alert.primary(h3("Alert with", span_badge.primary("primary"), "context."))

Dismissable alert with danger context.

from markyp_html.text import h3
from markyp_bootstrap4.alerts import dismissable
from markyp_bootstrap4.badges import span_badge

dismissable.danger(h3("Dismissable alert with", span_badge.danger("danger"), "context."))

Breadcrumbs

from markyp_bootstrap4.breadcrumbs import breadcrumb
from markyp_html.inline import a, em, strong

breadcrumb(
    a(strong("Home"), href="#"),
    a("Topic", href="#"),
    a("Subtopic", href="#"),
    em("Current page")
)

Buttons

Buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Active:

Primary Secondary Success Danger Warning Info Light Dark Link

Small:

Large:

Disabled:

Block:

Primary Secondary Success Danger Warning Info Light Dark Link

Outline buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Active:

Primary Secondary Success Danger Warning Info Light Dark Link

Small:

Large:

Disabled:

Block:

Primary Secondary Success Danger Warning Info Light Dark Link

Toggle buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Active:

Primary Secondary Success Danger Warning Info Light Dark Link

Small:

Large:

Disabled:

Block:

Primary Secondary Success Danger Warning Info Light Dark Link

Outline toggle buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Active:

Primary Secondary Success Danger Warning Info Light Dark Link

Small:

Large:

Disabled:

Block:

Primary Secondary Success Danger Warning Info Light Dark Link

Cards

Hungary

Hungary is a country in Central Europe, spanning 93,030 square kilometres in the Carpathian Basin. With about 10 million inhabitants, Hungary is a medium-sized member state of the European Union. The official language is Hungarian, which is the most widely spoken Uralic language in the world...

Learn more

Hungarian History

The foundations of the Hungarian state were established in the late ninth century CE by the Hungarian grand prince Árpád following the conquest of the Carpathian Basin. His great-grandson Stephen I ascended the throne in 1000, converting his realm to a Christian kingdom. By the 12th century, Hungary became a regional power, reaching its cultural and political height in the 15th century...

Learn more

Budapest

The history of Budapest began when an early Celtic settlement transformed into the Roman town of Aquincum, the capital of Lower Pannonia. The Hungarians arrived in the territory in the late 9th century. The area was pillaged by the Mongols in 1241. Buda, the settlements on the west bank of the river, became one of the centres of Renaissance humanist culture by the 15th century...

Learn more

Carousels

from markyp_bootstrap4.carousels import carousel, item_caption
from markyp_html.block import div
from markyp_html.inline import img
from markyp_html.text import h4

carousel(
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 1", class_="d-block w-100"),
       item_caption(h4("Slide 1"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 2", class_="d-block w-100"),
       item_caption(h4("Slide 2"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 3", class_="d-block w-100"),
       item_caption(h4("Slide 3"))
    ),
    add_controls=False,
    add_indicators=False,
    identifier="controlless-carousel"
)

Carousel without controls and indicators

from markyp_bootstrap4.carousels import carousel, item_caption
from markyp_html.block import div
from markyp_html.inline import img
from markyp_html.text import h4

carousel(
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 1", class_="d-block w-100"),
       item_caption(h4("Slide 1"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 2", class_="d-block w-100"),
       item_caption(h4("Slide 2"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 3", class_="d-block w-100"),
       item_caption(h4("Slide 3"))
    ),
    add_indicators=False,
    identifier="controls-only-carousel"
)

Carousel with controls

from markyp_bootstrap4.carousels import carousel, item_caption
from markyp_html.block import div
from markyp_html.inline import img
from markyp_html.text import h4

carousel(
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 1", class_="d-block w-100"),
       item_caption(h4("Slide 1"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 2", class_="d-block w-100"),
       item_caption(h4("Slide 2"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 3", class_="d-block w-100"),
       item_caption(h4("Slide 3"))
    ),
    add_controls=False,
    identifier="indicators-only-carousel"
)

Carousel with indicators

from markyp_bootstrap4.carousels import carousel, item_caption
from markyp_html.block import div
from markyp_html.inline import img
from markyp_html.text import h4

carousel(
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 1", class_="d-block w-100"),
       item_caption(h4("Slide 1"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 2", class_="d-block w-100"),
       item_caption(h4("Slide 2"))
    ),
    div(
       img.placeholder(4*160, 4*90, text=f"Slide 3", class_="d-block w-100"),
       item_caption(h4("Slide 3"))
    ),
    identifier="full-carousel"
)

Carousel with controls and indicators

Collapses

Collapse with multiple toggle buttons

from markyp_bootstrap4 import collapses
from markyp_bootstrap4.buttons import b_button
from markyp_bootstrap4.layout import row_break
from markyp_html.block import div

collapse_id = "collapse-1"
div(
    b_button.primary("Toggle collapse", class_="mb-2", **collapses.button_args_for(collapse_id)),
    row_break(),
    collapses.collapse(
        "Collapse content, closed by default.",
        identifier=collapse_id
    )
)

Accordion

Content of first collapse within the accordion ...

Content of second collapse within the accordion ...

Content of third collapse within the accordion ...

Content of fourth collapse within the accordion ...

Content of fifth collapse within the accordion ...

Dropdowns

Forms

Multiline login form

Grid login form

Inline login form

Input groups

First and last name:

Email address:

@markyp-bootstrap4.org

Jumbotrons

Example jumbotron

from markyp_html.text import h1, p

from markyp_bootstrap4.jumbotrons import jumbotron

jumbotron(
    h1("Jumbotron"),
    p("With a lengthy description...")
)

List groups with tabs

First Second Third

Curabitur massa ligula, auctor tempor libero in, pretium venenatis dolor. Donec feugiat facilisis libero, eu condimentum justo sagittis quis. Nullam arcu ante, porta a lacus sed, elementum venenatis leo. Nulla efficitur ornare semper. Aliquam mattis mollis ultricies. Integer imperdiet mauris tortor, ac congue nulla molestie id. Sed quis varius lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam magna diam, varius eget ligula ac, vestibulum venenatis lectus. Aliquam egestas pretium gravida. Vivamus bibendum ipsum magna, a vestibulum orci imperdiet a. Nam luctus ac odio vitae fringilla.

Proin ornare sapien tellus. Duis accumsan consectetur consequat. Morbi vel enim pretium, rhoncus augue a, rutrum nisl. Nam tempus tellus interdum velit vestibulum, quis feugiat orci mollis. Pellentesque libero enim, sodales iaculis consectetur in, volutpat sit amet magna. Praesent bibendum mollis nibh, ut feugiat velit consectetur vel. Curabitur pellentesque suscipit tincidunt. Praesent mattis purus arcu, id interdum dui commodo non. Nulla imperdiet massa a nulla pharetra pretium. Mauris fermentum euismod scelerisque. Quisque ante justo, iaculis at consequat eu, fringilla non sem. Vivamus feugiat nibh quis ante porta imperdiet. Vivamus ultricies augue vel enim finibus, ut viverra sapien tempus. Aliquam eleifend tellus sed tincidunt lobortis.

Ut id tempor enim, a fermentum orci. Aliquam lacinia, nulla at lacinia feugiat, tellus metus efficitur erat, eu porttitor tellus risus ac nisl. Nullam volutpat diam nec facilisis viverra. Ut fringilla metus at nisi pretium, in mattis lacus hendrerit. Nunc varius gravida quam nec vestibulum. Morbi vehicula eleifend diam, sit amet fermentum massa. Quisque sit amet pulvinar justo. Aliquam risus sem, commodo at erat cursus, interdum tempor leo. Praesent id orci eget orci eleifend sollicitudin. Sed quam arcu, faucibus vitae facilisis vel, volutpat quis eros. Nullam ullamcorper venenatis ligula at blandit.

Modals

from markyp_html.block import hr
from markyp_html.inline import img
from markyp_bootstrap4 import modals

modal_id = "example-modal-1"

# Toggle button for the modal.
modals.toggle_button.primary("Show modal", modal_id=modal_id),

# The modal itself.
modals.modal(
    "Modal content...", hr(), img.placeholder(300, 200), hr(), "More modal content...",
    title=modals.title.h4("Example modal"),
    footer=modals.close_button.primary("Close"),
    id=modal_id
)

Navs and navigated tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat orci turpis, eget euismod elit suscipit quis. Integer rutrum finibus diam et sodales. Integer dignissim erat urna, a sollicitudin augue egestas quis. Quisque a iaculis urna. Donec ac tortor quis est fermentum tincidunt at sed enim. Suspendisse sagittis neque nec laoreet imperdiet. Suspendisse interdum posuere sem auctor commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pulvinar risus dictum sapien lacinia, a vehicula felis fringilla. Quisque rhoncus erat eros, sit amet luctus mi vestibulum ac. Vivamus lobortis laoreet lacus nec ullamcorper. Phasellus pulvinar turpis molestie, accumsan justo vitae, vulputate lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

from markyp_bootstrap4 import navs
navs.navigated_tabs(
    ("First", "First tab content"),
    ("Second", "Second tab content"),
    ("Third", "Third tab content"),
    id="navigated-tabs-example",
    nav_fill=True,
    nav_justified=True
)

from markyp_bootstrap4 import navs
navs.navigated_tabs(
    ("First", "First tab content"),
    ("Second", "Second tab content"),
    ("Third", "Third tab content"),
    id="navigated-tabs-example",
    nav_fill=True,
    nav_justified=True
)

from markyp_bootstrap4 import navs
navs.navigated_tabs(
    ("First", "First tab content"),
    ("Second", "Second tab content"),
    ("Third", "Third tab content"),
    id="navigated-tabs-example",
    nav_fill=True,
    nav_justified=True
)

Navbars

from markyp_bootstrap4 import navbars
from markyp_bootstrap4 import navs
from markyp_html.block import div

collapse_id = "main-navbar-collapse"

navbars.navbar(
    navbars.brand("markyp-bootstrap4"),
    navbars.navbar_toggler(collapse_id=collapse_id),
    navbars.collapse(
        navs.nav_link("GitHub", href="https://github.com/volfpeter/markyp-bootstrap4", target="_blank", is_nav_item=True),
        navs.nav_link("PyPI", href="https://pypi.org/project/markyp-bootstrap4", target="_blank", is_nav_item=True),
        navs.nav_link("Bootstrap 4", href="https://getbootstrap.com/", target="_blank", is_nav_item=True),
        id=collapse_id,
        nav_factory=div,
    ),
    expand_point=navbars.ExpandPoint.LG,
    theme=navbars.Theme.DARK
)

Pagination

from markyp_bootstrap4 import pagination

pagination.pagination(
    *(pagination.page_item(item, active=index==3, href="#page-ref")
        for index, item in enumerate(("Previous", "1", "2", "3", "Next"))),
    aria_label="Pagination example",
    position=pagination.PaginationPosition.CENTER,
    size=pagination.PaginationSize.SMALL
)

Popovers

Auto-dismissed popover - top Auto-dismissed popover - bottom Auto-dismissed popover - left Auto-dismissed popover - right

from markyp_bootstrap4 import popovers
from markyp_bootstrap4.buttons import a_button, b_button

# Don't forget to add popovers.enable_popovers to the page.

b_button.primary("Popover - top", **popovers.popover("Content"))
b_button.primary("Popover - right", **popovers.popover("Content", placement=popovers.Placement.RIGHT))

# For auto-dismissed popovers to work, also add popovers.enable_auto_dismiss to the page.

a_button.info("Auto-dismissed - bottom", **popovers.popover("Content", auto_dismissed=True, placement=popovers.Placement.BOTTOM))
a_button.info("Auto-dismissed - left", **popovers.popover("Content", auto_dismissed=True, title="Title", placement=popovers.Placement.LEFT))

Progress

33%

50%

from markyp_bootstrap4 import progress
from markyp_bootstrap4.colors import bg

progress.progress("33%", value=33, bar_class=bg.primary, style="height: 2rem;"),
progress.progress("50%", value=50, bar_class=bg.secondary, striped=True, style="height: 1.5rem;"),
progress.progress(value=75, bar_class=bg.info, striped=True, animated=True),
progress.progress_base(
    progress.progressbar(value=30, class_=bg.danger),
    progress.progressbar(value=30, class_=bg.warning),
    progress.progressbar(value=30, class_=bg.success),
    style="height: 0.5rem;"
)

Tooltips

Tooltip button - top Tooltip button - bottom Tooltip button - left Tooltip button - right

from markyp_bootstrap4 import tooltips
from markyp_bootstrap4.buttons import a_button

a_button.success(
    "Tooltip button - top",
    **tooltips.tooltip("Tooltip", placement=tooltips.Placement.TOP)
),
a_button.success(
    "Tooltip button - bottom",
    **tooltips.tooltip("Tooltip", placement=tooltips.Placement.BOTTOM)
),
a_button.success(
    "Tooltip button - left",
    **tooltips.tooltip("Tooltip", placement=tooltips.Placement.LEFT)
),
a_button.success(
    "Tooltip button - right",
    **tooltips.tooltip("Tooltip", placement=tooltips.Placement.RIGHT)
)

Building web pages with Python, markyp , markyp-html and markyp-bootstrap4

Alerts and badges

Alert with primary context.

Dismissable alert with danger context.

Breadcrumbs

Buttons

Buttons from <a></a> , <button></button> , <label></label> , and <input> elements

Active:

Small:

Large:

Disabled:

Block:

Outline buttons from <a></a> , <button></button> , <label></label> , and <input> elements

Active:

Small:

Large:

Disabled:

Block:

Toggle buttons from <a></a> , <button></button> , <label></label> , and <input> elements

Active:

Small:

Large:

Disabled:

Block:

Outline toggle buttons from <a></a> , <button></button> , <label></label> , and <input> elements

Active:

Small:

Large:

Disabled:

Block:

Cards

Hungary

Hungarian History

Budapest

Carousels

Carousel without controls and indicators

Carousel with controls

Carousel with indicators

Carousel with controls and indicators

Collapses

Collapse with multiple toggle buttons

Accordion

First

Second

Third

Fourth

Fifth

Dropdowns

Group 1

Group 2

Group 1

Group 2

Group 1

Group 2

Group 1

Group 2

Group 1

Group 2

Group 1

Group 2

Forms

Multiline login form

Email

Password

Grid login form

Email

Password

Inline login form

Input groups

Jumbotrons

Example jumbotron

List groups with tabs

Modals

Navs and navigated tabs

Navbars

Pagination

Popovers

Progress

Tooltips

Building web pages with Python, `markyp` , `markyp-html` and `markyp-bootstrap4`

Buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Outline buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Toggle buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements

Outline toggle buttons from `<a></a>` , `<button></button>` , `<label></label>` , and `<input>` elements