Zum Hauptinhalt springen

Bootstrap Basic Notes

Table of Contents​

  1. Custom Bootstrap Theme
  2. Bootstrap Reboot Tips
  3. Useful Custom Functions
  4. Custom Colors
  5. Custom Spacing
  6. Custom Layout
  7. Custom Borders
  8. Custom Navbar and Navigation
  9. Custom Dropdown
  10. Custom List Group
  11. Custom Card
  12. Custom Breadcrumb
  13. Custom Form
  14. Reference

Custom Bootstrap Theme​

Bootstrap Reboot Tips​

  1. Use @import '~bootstrap/scss/reboot';.
  2. Best practices:
    • Set body font-size to 1rem for scalable spacing.
    • Avoid margin-top; use margin-bottom instead.
    • Prefer rems for margins for better scaling across devices.
    • Set box-sizing: border-box globally.
    • Use inherit wherever possible for font properties.

Useful Custom Functions​

Include these imports:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/mixins';

Example custom functions:

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

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

Custom Colors​

Import variables:

@import '~bootstrap/scss/variables';

Example:

$theme-colors: (
  'primary': #0074d9,
  'danger': #ff4136,
  'secondary': #495057,
  'success': #37b24d,
  'info': #1c7ed6
);

Custom Spacing​

Spacing classes:

  • t: top margin/padding
  • b: bottom margin/padding
  • x: horizontal (left + right)
  • y: vertical (top + bottom)

Examples:

.mt-0 { margin-top: 0 !important; }
.ml-1 { margin-left: ($spacer * 0.25) !important; }
.px-2 { padding-right: ($spacer * 0.5) !important; }

Custom Layout​

Key variables:

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

Custom Borders​

Customize border properties:

$border-width: 1px;
$border-color: $gray-300;
$border-radius: 0.25rem;

Custom Navbar and Navigation​

Navbar customization:

$navbar-light-color: $violet-4;
$navbar-light-active-color: $violet-9;
$navbar-dark-color: $violet-3;

Custom Dropdown​

Key variables:

$dropdown-padding-y: 1rem;
$dropdown-border-color: $primary;
$dropdown-item-padding-x: 3rem;

Custom List Group​

Example:

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

Custom Card​

Card customization:

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

Custom Breadcrumb​

Breadcrumb styles:

$breadcrumb-bg: $violet-0;
$breadcrumb-divider: quote('>');

Custom Form​

Form adjustments:

$input-btn-padding-y: 0.75rem;
$input-btn-focus-width: 0; /* remove focus shadow */

Reference​


This structure ensures clarity and organizes the content into digestible sections, making it easy for readers to navigate and understand.