Frontend Shorts: How to Space Elements in Bootstrap 4 Without Custom Classes

#webdev #programming #bootstrap #showdev

I’m happily coming back with my front-end shorts series.

Unfortunately, I don’t have enough time to write long articles, but I would be happy to share some front-end tips and tricks that I have already applied to some of my projects.

Most front-end and full-stack developers hate writing CSS. There are lots of reasons for that:

They still cannot get CSS to do what they want, precisely and without frustration.
It may be bulky. Often even the simplest styles require too many properties.
Some CSS rules are not straightforward (e.g., pseudo-elements need a content property to appear).
There is no go-to, standard methodology for class naming conventions, when to use IDs and classes, nesting depths, etc. Not every codebase uses BEM, SMACSS, styled-components, etc.
CSS is changing and growing, with different properties becoming popular, and others becoming defunct.
No two browsers agree on how to render the same CSS. Though some get close to agreement, it’s still a must to write CSS with at least four different browsers in mind (not to mention responsive CSS).

And more, and more… 😅

Despite all of that, I like playing with CSS, I really do — if I manage the code, not the CSS manages me.

In the last few days, I have marked up a landing page with Bootstrap 4, and on the go, have switched to the Bootstrap spacing utils approach, which allows you to

Have fewer CSS classes
Align elements relative to each other according to the grid
Use integrated or custom grid breakpoints
Control horizontal and vertical space in Bootstrap layouts
Keep code clean and not overcomplicated
Keep UI consistently-looking
Have the ability to change the spacing in the whole app by touching just a single file

Bootstrap 4 has built-in utility-responsive classes for margins and padding that you may use easily in various elements to manage the spacing.

Here are good examples, which helped me to optimize my work with Bootstrap 4 and customize the grid. The best way to work with and worth attention:

answer re: How do I use the Spacing Utility Classes on Bootstrap 4

Mar 22 '17

Update 2020 Bootstrap 4

The Bootstrap 4 spacing utils have changed since the original answer (for v4 alpha). Now the syntax is simply:

margins: m{sides}-{size}
padding: p{sides}-{size}

Examples..

mb-2 = margin bottom 2 spacing units
m-0 = no margins
pt-3 = padding top 3 spacing units
p-1 = padding all…

Here is my example of how this can be used in your markup:

The idea of using these small, pre-built classes allows you to have fewer custom classes and more consistent layouts throughout the application.

Additionally, you are not limited to the standard six spacing levels. In essence, you can always introduce more if you have a custom spacer override in your _variables.scss file. For example:

In conclusion, knowing your framework is essential, and getting the most out of it (in a proper way) can give you an advantage in the form of cleaner code and cleaner design.

Thank you for reading! 🙏

Code your best,
Ilona

Photo by Pixabay on Pexels