Styling Properties
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.
General
Opacity
Defines the opacity of the entire element. 100 is fully opaque while 0 is fully transparent.
Note: This is different than the opacity input, or alpha value, on the color picker. That value sets the opacity of the color itself. This setting sets the opacity of the entire element.
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 Weight
Select the font weight to apply to the selected element. Choose from standard weights ranging from 100 to 900.
Note: Not all fonts have all 9 weights.
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.
Top
Specify the amount of padding at the top of the container in pixels.
Right
Specify the amount of padding on the right side of the container in pixels.
Bottom
Specify the amount of padding to the bottom of the container in pixels.
Left
Specify the amount of padding on the left side of the container in pixels.
Center the text vertically
Check this box to center the text vertically.
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.
Other ways to learn
Last updated