Allows you to apply preset amounts of padding and / or margin around an element. This works a bit like using the Spacing tool's preset functionality.

The spacing classes are powerful, and can be applied to ranges of breakpoints depending on how you form your class names.

To apply spacing to the Extra Small breakpoint and up we contstruct the class name like so:

[ Property Type ][ Side ]-[ Preset Size ]

If we'd like to target specific breakpoints we can use this format for our class names:

[ Property Type ][ Side ]-[ Breakpoint ]-[ Preset Size ]

For the Property Type we choose one of the following, depending if we want to apply margin or padding:

For the Side we can choose one, multiple, or all. This will determine which sides of our element the spacing will be applied to:

Here we can specify at which breakpoints we'd like to apply our spacing. We can choose from Foundry's six breakpoints:

Here we can specify which of the 5 presets we want to use for our spacing, or choose zero for no spacing:

If we'd like to apply padding to all sides of an element, at all breakpoints using Preset spacing #5 our class name would look like this: p-5

If we'd like to apply margin to the top and bottom of an element, at the large breakpoint and larger using Preset spacing #3 our class name would look like this: my-lg-3

Using the premade display classes we can show and hide content, on our page, among other things. We can do so across all breakpoints, or target a range of breakpoints.

To apply a display property to the Extra Small breakpoint and up we contstruct the class name like so:

d-[ Display Type ]

If we'd like to target specific breakpoint ranges we can use this format for our class names:

d-[ Breakpoint ]-[ Display Type ]

Here we can specify which of the various display types we want to apply to our page element. We've listed them in order from most to least commonly to be used:

Bootstrap provides several more display property type. These can be found in the Bootstrap documentation if you're interested.

Here we can specify at which breakpoints we'd like to apply our display property. We can choose from Foundry's six breakpoints:

If we'd like to apply a block display property to an element at all fo the Foundry breakpoints we can apply the following class name: d-block

If we'd like to hide a page element, using none, at the large breakpoint and larger we could use the following: d-lg-none

Sometimes we want to keep content from overflowing the bounds of an element, or just the opposite we'd like to allow it to do so. These are used most often with elements that have a fixed height and / or width. We can do that a more using the preset overflow classes in Bootstrap.

To apply an overflow property via a class name to our element we construct it like so:

overflow-[ Overflow Type ]

We have three options to choose from for applying overflow properties to our page elements:

If we'd like to apply an overflow property to our page element that allows the content to exceed the elements bounds we could use the following class name: overflow-visible

Often we'd like to add a simple border to an element, or between columns. If it doesn't need to be a complex border we can use one of Foundry's common CSS classes to accomplish this.

We can add a border to the outside of an element on all sides, or we can choose one or more sides to add a border to individually. Below we look at our options (these do not set a color or width of their own).

We can work backwards as well, adding a border to all four sides using the border class and then using one or more of the classes below to disable borders on specified side(s).

An example of doing this would look like this: border border-top-0

This would put a border on three sides — left, right and bottom — while hiding the border on the top of our page element.

We also have access to Foundry's main 6 color presets for the border as well using the following class names:

We can customize out font size using a few preset classes. Sometimes we'd like some text to be the size of a Heading for instance, but don't want it to use a header tag (h1, h2, h3, etc). We can accomplish that with the classes below. Each will size text to match Bootstrap's preset header sizes accordingly.

Additionally Bootstrap includes Display font classes that allow us to supersize text. We can use the classes below to apply these Display Font Sizes to our content. As a bonus these classes are responsive and will size down the text based on breakpoint as well.

Most Foundry tools that deal with text have controls that allow you to interface with it to change the color, using the Foundry Presets, Custom Color Pickers, the Extended Palette, etc. Sometimes though you may want to access the Foundry Preset Color Palette using quick class names. Below you'll find class names for setting the Color of a page element:

If you're looking for a quick and easy way to apply a background color to a pager element using one of Foundry 6 Preset Colors, you can apply one of these classes to that page element:

We can easily change the opacity of a page element, and all of the items within that element, by applying one of the preset opacity class names below:

We can stack elements together horizontally by applying a class to a containing element. In Foundry 3 we often use the Container for things such as this. Using the class hstack on a containing element we'll get horizontally stacked items. Here's a quick example using a Container with some buttons inside, where we've applied the class hstack to the Container: