Decrease size of everything in bootstrap 4 globally

Question

Is there a way to decrease all sizes by a certain amount for Bootstrap 4 globally?

The regular sizing is a tad to big for my desktop admin. Instead of going though and adding small classes from bootstrap and custom classes to get the sizes I want, can I update variables in bootstrap that will decrease the sizes everywhere (padding, margin, font-size, etc).

Answer 1

In Boostrap 4:

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

}

Here the font-size is defined as 1rem. In all of Bootstrap CSS the sizes of things are in rem which is root em so to update this :

Currently in Bootstrap 4:

:root {
    --blue: #007bff;  
    ... colours ...
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI", ... ,Roboto;
    --font-family-monospace: SFMono-Regular, ... ,monospace
}

*,::after,::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

To update:

In the :root or html sections you set the font size to be a set size, in px, what this is will depend on what you are looking for:

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
    font-size: 12px; /* for example */
}

OR

:root {
    ...
    ...
    font-size: 12px; /* for example */
}

---

Will that take care of all buttons and divs and all other element paddings and margins? A large button will look weird with a smaller font size.

This will take care of everything in CSS that is sized in em or rem units, I have not done an exhaustive check but looks like it would cover pretty much everything.