All demos

Style and responsive utilities

Inline style. The gear of a row, a column, a container, a tab, an element or a section has a Style accordion: size, spacing, border, background, text, typography, display, flex, position and free css. What you type is written to the node's own style; a value the browser does not take is marked and not written. The inline style is the same at every size.

Bootstrap's classes. Each section also offers Bootstrap's classes for what it styles, as chips: one puts its class in the classes field, and pressing it again takes it off. Bootstrap's utilities are !important, so a field whose property a class on the node also sets says the class wins.

Per breakpoint. Padding and margin, text alignment, display, flex, sticky and float, in the Style accordion, and order, a column's alignment and gutters, in the Responsive section, are Bootstrap's responsive classes. Pick a breakpoint in the toolbar's dropdown and a change is written for that breakpoint alone; in All sizes it is written once, for every size. Every field says what the breakpoint inherits and from where.

  • Display: the eye in a drawer hides the node in the view being edited, faded so you can show it again. The sidebar of the third row is hidden on phones and tablets.
  • Order: the arrows in a column's drawer move it without moving the markup. In the fourth row, "Second" comes first on phones only.
  • Gutters: the fourth row has none on phones and wide ones from small desktop up.
  • Alignment and spacing: the fifth row centres its column from small desktop up, which gets more padding and centred text there too.
  • Float: the quote in the last row floats to the end from tablet up, with the text flowing round it.
  • Flex: a node that is flex has its drawer on top, out of the flow, so its content is laid out as on the page.

Last utility change: none yet


            

        


        


            

                

                    
Styled inline

                    
This row has a background and a radius in its style; open its gear and look in Background and Border.

                

                

                    
A class and a style

                    
It has shadow-sm and an inline shadow: the class wins, and the Border section says so.

                

            


            

                

                    
A column made flex: its texts are stacked on phones and side by side from tablet up, with a gap between them.

                    
Open its gear, and look in Display and Flex.

                

                

                    
This column has text-bg-dark, one of Bootstrap 5.3's colors in the Background section, with the subtle ones and the opacities.

                

            


            

                

                    
Main content

                    
Full width on phones and tablets, two thirds from small desktop up. Try Size on this column: it offers only the min- and max- widths and heights, since its width is the grid's.

                

                

                    
Sidebar

                    
Only from small desktop up: d-none d-md-block.

                

            


            

                

                    
First

                    
Change the views and the utilities of these two.

                

                

                    
Second

                    
First on phones, with order-first order-sm-0.

                

            


            

                

                    
Centred

                    
Its row has justify-content-md-center, and it has py-2 py-md-4.

                

            


            

                

                    

                        An element, floated with float-sm-end, with a few classes from the catalog and some typography of its own.
                    

                    
The text after it flows round the quote from tablet up, and runs under it on phones, where it does not float. Switch between Phone and Tablet in the dropdown to see it move, or choose another float in the element's Position section.

                    
A second paragraph, so there is enough text to flow.