Skip to main content

Bootstrap Basic Notes

Custom Bootstrap Theme

Bootstrap Reboot Tips

  • @import '~bootstrap/scss/reboot;

Some useful best practices:

  • body font-size: 1rem for scalable component spacing.
  • avoid margin-top as vertical margins collapse (only use margin-bottom for headings h1/.../h6, lists ul/ol/dl/dd, <pre></pre>)
  • block use rems for margin for easier scaling across device sizes
  • using inherit whenever possible for font- property
  • box-sizing: border-box is globally set on every element including *::before and *::after
  • body sets a global font-family, line-height and text-align
  • body sets background-color: #fff for safety
  • legend/fieldset have no borders/padding/margin
  • label are set to display: inline-block to allow margin
  • textarea are modified to only be resizable vertically resize: vertical as horizontal resizing often “breaks” page layout
  • summary are set to cursor: pointer

Useful Custom Functions

  • @import '~bootstrap/scss/functions';
  • @import '~bootstrap/scss/mixins';
@function color($key: 'blue') {
@return map-get($colors, $key);

@function theme-color($key: 'primary') {
@return map-get($theme-colors, $key);

@function gray($key: '100') {
@return map-get($grays, $key);

@function theme-color-level($color-name: 'primary', $level: 0) {
/* stylelint-disable-next-line function-no-unknown */
$color: theme-color($color-name);
/* stylelint-disable-next-line function-no-unknown */
$color-base: if($level > 0, #000, #fff);
$level: abs($level);

@return mix($color-base, $color, $level * $theme-color-interval);

/* color contrast: color-yiq(color) */
.custom-element {
/* stylelint-disable-next-line function-no-unknown */
color: color-yiq(theme-color('dark'));
/* stylelint-disable-next-line function-no-unknown */
background-color: color-yiq(#000);

Custom Colors

  • @import '~bootstrap/scss/variables';
$theme-colors: (
'primary': #0074d9,
'danger': #ff4136 'secondary': #495057,
'success': #37b24d,
'info': #1c7ed6,
'warning': #f59f00,
'danger': #f03e3e

$colors: (
'blue': $blue,
'indigo': $indigo,
'purple': $purple,
'pink': $pink,
'red': $red,
'orange': $orange,
'yellow': $yellow,
'green': $green,
'teal': $teal,
'cyan': $cyan,
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800

Custom Spacing

key variable - $spacer:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both xxx-left and xxx-right
  • y - for classes that set both xxx-top and xxx-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element
  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25.
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5.
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5.
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3.
  • auto - for classes that set the margin to auto
.mt-0 {
margin-top: 0 !important;

.ml-1 {
margin-left: ($spacer * 0.25) !important;

.px-2 {
padding-right: ($spacer * 0.5) !important;
padding-left: ($spacer * 0.5) !important;

.p-3 {
padding: $spacer !important;

.mt-n1 {
margin-top: -0.25rem !important;

Custom Layout

$grid-columns: 12;
$grid-gutter-width: 30px;

Custom Borders

$border-width: 1px;
$border-color: $gray-300;
$border-radius: 0.25rem;
$border-radius-lg: 0.3rem;
$border-radius-sm: 0.2rem;

Custom Navbar and Navigation

/* $nav-link-padding-x: 1.5rem; */
$navbar-nav-link-padding-x: 1.5rem;
$nav-link-padding-y: 1rem;

$navbar-light-color: $violet-4;
$navbar-light-hover-color: $violet-6;
$navbar-light-active-color: $violet-9;
$navbar-light-toggler-border-color: $violet-2;

$navbar-dark-color: $violet-3;
$navbar-dark-hover-color: $violet-5;
$navbar-dark-active-color: $violet-1;
$navbar-dark-toggler-border-color: $violet-1;

$nav-tabs-border-color: $primary;
$nav-tabs-link-hover-border-color: $violet-5;
$nav-tabs-link-active-color: $violet-9;
$nav-tabs-link-active-bg: $violet-3;
$nav-tabs-link-active-border-color: $violet-1;

$nav-pills-link-active-color: $white;
$nav-pills-link-active-bg: $primary;

Custom Dropdown

custom $dropdown- variables

$dropdown-padding-y: 1rem;
$dropdown-spacer: 0.5rem;
$dropdown-bg: $white;
$dropdown-border-color: $primary;
$dropdown-border-width: $border-width * 3;
$dropdown-link-color: $primary;
$dropdown-item-padding-y: 0.5rem;
$dropdown-item-padding-x: 3rem;

Custom List Group

$list-group-border-color: $primary;

Custom Card

$card-border-color: $primary;
$card-color: $primary;
$card-bg: $violet-0;

Custom Breadcrumb

$breadcrumb-bg: $violet-0;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $violet-3;
/* stylelint-disable-next-line function-no-unknown */
$breadcrumb-divider: quote('>');

Custom Form

$input-btn-padding-y: 0.75rem;
$input-btn-padding-x: 1.5rem;
$input-btn-focus-width: 0; /* remove focus box-shadow */
$custom-control-indicator-checked-color: $primary;