Bootstrap en palabras sencillas: qué es, para qué sirve y cómo funciona el framework

<button class="btn btn-primary">Soy un botón azul</button>

<section class="d-flex bg-white">
<!-- Estructura HTML -->
</section>

background-color: #fff;
display: flex;

$blue: #0d6efd !default;
$green: #198754 !default;
$cyan: #0dcaf0 !default;
$yellow: #ffc107 !default;
$red: #dc3545 !default;
$gray-100: #f8f9fa !default;
$gray-600: #6c757d !default;
$gray-900: #212529 !default;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;

@mixin make-container();
@mixin make-row();
@mixin make-col();

.search-form {
@include make-container();

&__content {
@include make-row();
}

&__input,
&__button {
@include make-col-auto();
}
}