Display tab - control how to display elements on you website
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

Display tab - control how to display elements on you website

Display property is like choosing different puzzle shapes to make your website look just the way you want it. It defines how the components are going to be placed on the page and is one of the most important properties for controlling layout.

 

Below you’ll find out how to use it in BOWWE and apply to your project.

How to use the Display tab in BOWWE?

1
Select the element you want to adjust.
Tip
  • If you want to use property flex - find its container on the Hierarchy Bar or Widget Tree (element higher in the hierarchy) and click on it
  • For other display properties - click on the element directly
2

Open Widget Styles and go to the Position tab.

3
Choose the Display property to control how the content of the container is displayed.

Remember about:

By selecting the container, you can access properties and settings that affect the elements inside (children), such as layout, positioning, and styling.

Main display properties

Block

You should use this property when you want the element to always start from a new line and occupy the full width of the container while still being able to set the width. Some of the most common uses of block display:

 

Example of display block*:

 

*green dashed line informs about how much space the element occupies​​​​​​

This is your heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat. Curabitur malesuada nibh augue, a dapibus mi elementum a. Nam quis aliquam ex. Quisque rutrum nisl sit amet tortor congue congue. Mauris euismod nec ligula vitae vulputate. Duis ut tincidunt sapien. Fusce pulvinar dui vitae ipsum porttitor, sit amet convallis ex venenatis. Nam blandit, nisl eget ultricies gravida, leo turpis fermentum ipsum, et pretium ante ex in diam. Nullam orci lectus, finibus eu diam sed, semper tincidunt nibh. Aliquam vestibulum sit amet metus id interdum. Morbi in velit eget magna porta euismod. Mauris semper libero at dolor eleifend tincidunt a non ex. Sed ut mauris vel libero finibus mattis.

Flex

If you want to create a flexible container that can dynamically adjust its child elements' sizes and positions, choose the flex display. It allows you to align and justify the elements inside the container and provides an easy way to distribute child elements evenly across a row or column. Select flex property for:

 

Example of display flex:​​​​​​

Direction:

Row

Column

Align items:

Flex-start

Flex-end

Center

Justify content:

Flex-start

Flex-end

Center

Space-between

Space-around

Space-evenly

1
2
3
4
5

Inline

Use the inline property if you want the elements to take up only as much space as necessary, and stay in the same line if there is enough space. Elements will be displayed inline with the surrounding content, use it for:

 

  • adding small elements such as buttons, icons, and labels
  • images with surrounding text
  • horizontal lists, such as navigation menus or product listings
  • styling fragments of text differently from the rest paragraph.

Example of display inline*:

 

*green dashed line informs about how much space the element occupies​​​​​​​​​​​​

Lorem ipsum dolor sit amet, adipiscing

INLINE TEXT

sagittis eni.

Duis aliquam, 

INLINE BUTTON

massa non vehicula suscipit, lectu dol
lectus dolor ullamcorper massa, in rutrum neque urna at odio. 

Inline - block

Value inline-block is useful in situations where you want to create a block-level element that sits inline with other elements on the same line, while also being able to set a width and height. Some common uses are:

 

  • creating columns of text
  • adding inline images with captions
  • building horizontal navigation menu

Example of display inline-block*:

 

*green dashed line informs about how much space the element occupies​​​​​​​​​​​​

This is
your caption

None

Select none to hide elements without deleting and recreating them. It turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements are also hidden.

Note

If you want to bring back the element to your website, find it in the Widget Tree and change the display property. Remember that this change will transfer across other screen devices due to inheritance mechanism.

 

Learn more about inheritance​​​​​​​ here

Overflow X & Y - How does it work?

If the content inside an element is larger than the element itself, it will overflow. To control how content that exceeds the dimensions of an element is displayed, specify the overflow property. Use it if you want to:

  • prevent content from overflowing outside the container
  • create a scrollable area within a container
  • hide content that exceeds the dimensions of an element

Example of overflow scroll*:

 

*green dashed line informs about how much space the element occupies​​​​​​​​​​​​

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.

Read more

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.

Read more

Overflow X controls the horizontal overflow of content, while overflow Y controls the vertical overflow. Here's how each property works:

 

visible - the content is not clipped and is visible outside the element's box

hidden - anything beyond the container's dimensions will be hidden

scroll - the overflow is clipped, and a scrollbar is added to see the rest of the content

auto -  if the content overflows outside its box then that it will be hidden whilst a scroll bar should be visible for users to read the rest of the content

initial - uses the default value (visible)

inherit - element inherits this value of this property from its parent element

Manual -  How to align and justify elements on your website?

1
Open your project in BOWWE
2
Select the element you want to adjust.
3
Locate the container that the specific element is nested within. You can find this by looking at the Hierarchy Bar or Widget Tree, which displays the visual hierarchy of all the elements in your project.
4
Once you have identified the container element, click on it to select it. This allows you to make adjustments to the child element(s) nested within it.
5
Open Widget Styles and go to the Position tab.
6
Change the Display property to flex - Align items and Justify content settings will appear.
7
Specify the values and modify how the elements will be displayed.

Congratulations!

Now you know how to use display properties.

Remember about:

  • Be aware of the impact of display on the document flow: Changing the display property of an element can have an impact on the document flow and the layout of other elements on the page. It is important to test the impact of any display changes and adjust other elements as necessary.

Hours

Minutes

Seconds

3 years for less than 1 year

save up to

$723