Example use: Bootstrap 4 padding utility classes

This example guides you through the steps to create a responsive class field for Bootstrap 4's padding utility class for your content entity.

Preface

The notation of a Bootstrap 4 padding utility class is explained at the Bootstrap 4 documentation as this:

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3

We will create a responsive class field for padding at all sides. Our CSS class pattern therefore is like p-{breakpoint}-{size}, whereas the smallest breakpoint value and its leading dash are empty.

How to do it

Step 1: Create a new responsive class field

Navigate to your content entity's Manage fields tab. This is usually located within your administrative back-end's menu at Structure > [Entity type] > [Bundle] > Manage fields, e.g. for a Paragraphs type "Headline" at Structure > Paragraph types > Headline > Manage fields.

Create a new field by clicking the  button and choose Responsive class from the General options of the Add a new field drop-down.

Give your field a descriptive label and click Save and continue.

Step 2: Configure the field storage settings

Pattern

As previously explained, the CSS class pattern of the Bootstrap 4 padding utility class we want to implement is p-{breakpoint}-{size}, whereas the smallest breakpoint value and its leading dash are empty.

The responsive class field uses the similar placeholder names {breakpoint} and {value}. As Bootstrap's first breakpoint value and its leading dash are empty for the smallest breakpoint, we need to include the dashes into our breakpoint replacement values as well.

The resulting pattern for our CSS classes therefore is p{breakpoint}-{value}.

Breakpoint group

The responsive field class module comes with a pre-defined set of breakpoints that already fits our example's use. If you are using a Bootstrap theme with own breakpoint definitions, you may switch the breakpoint group accordingly.

Then we enable five Breakpoints for the different screen widths supported by Bootstrap. As Bootstrap 4 is responsive first, it's values always apply to the smallest chosen size and all bigger sizes upwards. So we start our field's breakpoint settings with the smallest breakpoint and work our way up to the biggest breakpoint.

If your theme's breakpoints have a different order, don't worry about the screen resolutions and media queries. All information the responsive class field uses is the breakpoint identifier and your configured name/value. So we can safely override the breakpoints by giving them different labels.

The first breakpoint can be labeled Extra small. The value should be left empty to account for Bootstrap's 0 and up classes that aren't bound to a media query.

The following breakpoints may have labels as Small, Medium, Large and Extra Large with the values  -sm,  -md, -lg and -xl  respectively.

Responsive class field: Per-breakpoint settings

Allowed values list

This list follows the values available for Bootstrap's  {sizes}. Given a default Bootstrap, where the spacer is set to a value of 1rem, our list should look like this:

0|None
1|0.25 rem
2|0.5 rem
3|1 rem
4|1.5 rem
5|3 rem

Now, we can save our field settings.

Step 3: Manage form display

Within our entity's Manage form display tab, we need to ensure that the field is enabled and uses the Responsive class form widget.

If our field is disabled here, we drag it up to the enabled fields list.

Step 4: Manage display

Within our entity's Manage display tab, we need to ensure the field is enabled for all displays where the classes should be added, and is using the Responsive class formatter.

The Responsive class formatter won't produce any output on its own, so the label position does not affect your output.

Yet, if the field is disabled, the CSS classes won't be added automatically to our entity's HTML wrapper attributes. This is intended behavior of the responsive class field module to avoid CSS classes to being added to teasers or other displays of our entity.

Summary

We have successfully created and configured a responsive class field for our content entity. The responsive class field is not limited to Bootstrap 4 classes, but does quite well with them.

If you wish, you can add further fields for margins or the various sides, altering the CSS class pattern accordingly.