Decrease size of everything in bootstrap 4 globally

user_280602 0
Viewed 768

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).

bootstrap-4 twitter-bootstrap sass css
2 Answers

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.

user_35362360

Why not change your break points in the _custom.scss file and recompile bootstrap.
Advantage you have less problems when upgrading and the custom breakpoints change the elements accordingly if you have used the "normal" respnsive design and not tweaked it in differentways Example new breakpoints (adapt to your use case and likes.

// File: _custom.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0px,
        sm: 1280px,
        md: 1920px,
        lg: 2560px,
        xl: 3480px,
        xxl: 3840px
);

$container-max-widths: (
        sm: 1240px,
        md: 1880px,
        lg: 2520px,
        xl: 3460px,
        xxl: 3820px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

Additional Info
According to the documentation: https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults, in order to customize Bootstrap you need to:

  • copy/paste from /scss/_variables.scss to _custom.scss whatever you want to modify
  • remove any !default from the pasted code and change the values to what you want
  • recompile (see Build tools: https://getbootstrap.com/docs/4.0/getting-started/build-tools/) - you need to successfully run npm run dist to rebuild from source.
user_102455810
Related