Frontend: Responsive Design

Building responsive layouts in Dracory using Bootstrap grid system.

Responsive Design

Dracory is built with responsive design in mind. The default layout uses Bootstrap, which provides a responsive grid system and components that work well on all devices.

To create responsive layouts, use the Bootstrap grid system:

func responsiveLayout() hb.TagInterface {
    return hb.Div().
        Class("container").
        Child(hb.Div().
            Class("row").
            Child(hb.Div().
                Class("col-lg-4 col-md-6 col-sm-12").
                Child(hb.H3().Text("Column 1")).
                Child(hb.P().Text("Content for column 1"))).
            Child(hb.Div().
                Class("col-lg-4 col-md-6 col-sm-12").
                Child(hb.H3().Text("Column 2")).
                Child(hb.P().Text("Content for column 2"))).
            Child(hb.Div().
                Class("col-lg-4 col-md-12 col-sm-12").
                Child(hb.H3().Text("Column 3")).
                Child(hb.P().Text("Content for column 3"))))
}
Menu