Frontend Shorts: How to Space Elements in Bootstrap 4 Without Custom Classes
Tags: webdev, programming, bootstrap, showdev
Published: 2020-04-06 12:07:19

---
title: Frontend Shorts: How to Space Elements in Bootstrap 4 Without Custom Classes
canonical_url: https://medium.com/better-programming/frontend-shorts-how-to-space-elements-in-bootstrap-4-without-custom-classes-de61fbc43cbb
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/c51jkx5d2bybv1t4ymv5.jpg 
published: true
description: Front-end shortcuts on how to space elements in Bootstrap 4 without custom classes
tags: 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](https://getbootstrap.com/), and on the go, have switched to the [Bootstrap spacing utils approach](https://getbootstrap.com/docs/4.0/utilities/spacing/), 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:

{% stackoverflow 42960338 %}

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

{% gist https://gist.github.com/ilonacodes/e0701b8ec0e89003c730dce91bdf0dd2 %}

**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:

{% gist https://gist.github.com/ilonacodes/142e4de53855ba8b9c8b2eb654ef4be7 %}

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_