Styling Properties (Legacy)

These are common styling properties that can be applied to most elements in the Bubble Editor. They include borders, backgrounds, shadows, fonts, etc. These are also properties included in Styles.

Dimensions

These properties control the size and positioning of the selected element.

Width

Defines the width of the selected element in pixels.

Height

Defines the height of the selected element in pixels. This height adjusts if the element or content inside a container is 'Set to stretch to fit content.' In this case, the number entered here is the minimum height for that element.

Left

Defines the horizontal position in pixels relative to the left border of the containing element, which is either a group or popup or the page.

Top

Defines the vertical position in pixels relative to the top border of the containing element, which is either a group, a popup, or the page.

Rotation angle

Rotate the selected element by entering a number in this field. This number is expressed in degrees.

Shadows

These properties define a shadow for the selected element.

Shadow style

Choose from None, Outset, and Inset to define a shadow to the selected element. Inset sets a show inside the element. Outset sets a show outside the element.

Horizontal offset

Defines the position of the horizontal shadow. Negative values are allowed.

Vertical offset

Defines the position of the vertical shadow. Negative values are allowed.

Shadow Blur radius

Define the blur distance in pixels. A higher number means a more diffuse shadow, and a lower number means a sharper shadow.

Shadow spread radius

Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

Shadow color

Defines the color of the shadow. Tip: Experiment with the transparency of the color.

Font options

These properties style text.

Font

Select the font family to apply to the selected element. Choose from the hundreds of fonts in the Google Fonts Library.

Font Size

Enter a font size in pixels for the text.

Bold

Makes the text darker and thicker.

Italic

Makes the text slanted.

Underline

Underlines the text. This is useful in conditional formatting, when a link is hovered, for instance.

Text Alignment

Aligns the text. Choose from Left, Center, and Right.

Font Color

Select the text color.

Placeholder color

Select the color to apply to the placeholder of the input element.

Font Shadow

These properties add a shadow to texts.

Show text shadow

Check this box to show a shadow on the text.

Horizontal offset

Defines the position of the horizontal shadow. Negative values are allowed.

Vertical offset

Defines the position of the vertical shadow. Negative values are allowed.

Font Shadow Blur Radius

Define the blur distance in pixels. A higher number means a more diffuse shadow, and a lower number means a sharper shadow.

Font shadow Color

Select the color of the shadow. Tip: Experiment with the transparency of the color.

Font options

These options control text spacing.

Word spacing

Define the space between words in pixels.

Line spacing

Define the line height in pixels.

Letter spacing

Define the space between letters in pixels.

Borders

These properties define the borders of the elements.

Note: Top and left borders on an element will nudge the center alignment of items inside that element (e.g. text). One workaround is to have a text element inside of another element (e.g. group), and apply the border to the outside element instead.

Define each border independently

Check this box if borders are to be set independently.

Border style

Choose a style for the border. Choose from None, Dotted, Dashed, Double, Groove, Ridge, Inset, and Offset.

Border roundness

Define the border radius in pixels.

Border Width

Define the border width in pixels.

Border color

Select the border color.

Tooltip on hover

Tooltip text (on hover)

This text is displayed by the browser when the user hovers over it with the mouse. Technically, it sets a title attribute to the element it is applied to.

Padding

These properties let you select the space between the borders and the actual content of the element.

Vertical padding

Vertical distance in pixels between the top border and the element content.

Horizontal padding

Horizontal distance in pixels between the left border and the element content.

Center the text vertically

Check this box to center the text vertically.

Note: If text is centered vertically but is long enough to be multiple rows, only the first row will be in the vertical center of the element. If you are using the New Responsive Engine [beta], the feature will work as expected.

Tip: Top and left borders on an element will nudge the center alignment of items inside that element (e.g. text). One workaround is to have a text element inside of another element (e.g. group), and apply the border to the outside element instead.

Background

These options define the background of the elements: color, image, etc.

Background style

Select the background style to apply to the element. Choose from None, Flat color, Gradient, and Image.

Background Color

Select the background color for the element.

Gradient style

Choose from Linear and Radial to define the gradient style.

Gradient direction

Choose from Top, Left, Bottom, Right, and Custom to define the gradient direction.

Direction degrees

Enter a value between 0 and 360 for the direction of the gradient.

Gradient shape

Defines the shape of the gradient. Choose from Ellipse and Circle.

Gradient base

Select a screen location from this dropdown menu to determine where to base the gradient. Choose from Closest-side, Closest-corner, Farthest-side, and Farthest-corner.

X center position (%)

Define the horizontal centering position. 50% will center the gradient.

Y center position (%)

Define the vertical centering position. 50% will center the gradient.

Starting color

Select the starting color of the gradient.

Ending color

Select the ending color of the gradient.

Intermediate color

Select the optional middle color of the gradient. If the input is empty, no intermediate color will be applied.

Background image

Upload or define a dynamic image. Select an image from the Bubble royalty-free library, if desired.

Center the image

Centers the image in the element.

Make image as wide as parent element

If the element is wider than the element selected, the image will automatically resize to cover the entire element.

Crop the image to fit the element size

In Responsive mode, checking this option makes sure the element's background image will be cropped to fill the entire element's background without distorting the image.

Repeat the image vertically

Repeat the image vertically if the image is smaller than the element's height.

Repeat the image horizontally

Repeat the image horizontally if the image is narrower than the element's width.

Background color if empty

When using a dynamic image, it might take a few milliseconds for the image to load. In the meantime, select a background color for the element. The default is transparent.

Bubble renders the page to adjust to the screen width, i.e, responsive layout. A few options control the behavior of the page.