01/02/2024
Our website uses the Bootstrap Barrio Theme for Drupal. Originally designed for twitter in order to facilitate consistency across various products, since 2011 Bootstrap is a free and open-source CSS framework. It is designed to deliver a responsive and mobile-first front-end website theme, and is used on nearly 20% of websites.
Bootstrap offers a range of CSS classes to format a range of components, such as columns, buttons, accordions, cards and carousels as well as classes to control padding and margins around components, and their borders and shadows.
These can be easily added to blocks in the Gutenberg Editor using the Settings panel for the block at the bottom of which is the Advanced section. At the bottom of this is a text box labelled Additional CSS class(es) into which you can type these Classes.
There are three drawbacks to this at the time of writing.
Firstly the Bootstrap framework is not used by Gutenberg, which means that the CSS styles are not visible in the editor itself. The grey Preview button comes in handy here.
Secondly, some Gutenberg blocks wrap several of the items they manage in other html components.
In particular the image block wraps the image (<img>) element with a division (<div>) element, and then a figure (<figure>) element. This means that if you apply a CSS class to that block, say a shadow or a border, then it will affect the outer division (<div>) and not the image.
I have therefore added these classes to our theme
- shadowimage and borderimage -
which apply the shadow or border to the image and not the division - see the example thumbnails 'below'. More such classes can be added as required.
Also, to add space between each item in the list block, use spaceout.
Thirdly, a new release of Gutenberg for Drupal is being prepared for imminent release (currently at level 3.0.0-beta5, released on 22 Dec 2023). This adds block settings to control padding and margins, and possibly borders.
Padding is space added between the element's content and its border.
Margin is space added outside the element's border.
Both are applied even if the element has no border as no border is really a border of zero width.
Bootstrap CSS Classes I find useful are
p-3 - adds a small padding to the object on all sides
m-3 - adds a small margin to the object on all sides
ps-5 adds a larger amount of padding to the start (left) of the element - thus indents the paragraph
ms-5 adds a large amount of margin to the start of the element.
border - add a 'regular' border.
shadow - adds a 'regular' shadow.
(append -sm for a smaller shadow, or -lg for a larger shadow)
Note that when you add background colour, Gutenberg (currently at least) also adds some padding!
Thus can be over-ridden by using the p-0 class, which you can then follow with a padding setting of your own choice.