Bootstrap-sass provides complete CSS framework functionality through Sass stylesheets, offering extensive customization through variables and mixins while maintaining the full Bootstrap component library.
Imports all Bootstrap components including variables, mixins, and component styles.
/**
* Main Bootstrap import - includes all components
* Imports: variables, mixins, normalize, grid, typography, forms, buttons,
* navigation, components, utilities, and responsive utilities
*/
@import "bootstrap";Usage Example:
// Import all Bootstrap
@import "bootstrap";
// Now you can use any Bootstrap class or mixin
.my-custom-button {
@extend .btn;
@extend .btn-primary;
@include border-radius(10px);
}Asset path helpers for different build systems to ensure proper font and image loading.
/**
* Sprockets asset helper - must be imported before bootstrap
* Configures proper asset paths for Rails asset pipeline
* Uses asset-path() and asset-url() functions
*/
@import "bootstrap-sprockets";
/**
* Compass asset helper - must be imported before bootstrap
* Configures proper asset paths for Compass builds
* Uses font-url() and image-url() functions
*/
@import "bootstrap-compass";
/**
* Mincer asset helper - must be imported before bootstrap
* Configures proper asset paths for Mincer builds
* Uses EJS interpolation for asset paths
*/
@import "bootstrap-mincer";Usage Example:
// For Rails applications
@import "bootstrap-sprockets";
@import "bootstrap";
// For Compass builds
@import "bootstrap-compass";
@import "bootstrap";Import individual Bootstrap components for smaller build sizes.
// Core foundation (required for any selective imports)
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";
// Components with JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
// Optional theme
@import "bootstrap/theme";Usage Example:
// Minimal Bootstrap with just grid and buttons
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/normalize";
@import "bootstrap/grid";
@import "bootstrap/buttons";Override Bootstrap's default variables to customize appearance.
// Color variables
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default;
$gray-dark: lighten($gray-base, 20%) !default;
$gray: lighten($gray-base, 33.5%) !default;
$gray-light: lighten($gray-base, 46.7%) !default;
$gray-lighter: lighten($gray-base, 93.5%) !default;
$brand-primary: darken(#428bca, 6.5%) !default;
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
// Typography variables
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default;
$font-size-small: ceil(($font-size-base * 0.85)) !default;
$font-size-h1: floor(($font-size-base * 2.6)) !default;
$font-size-h2: floor(($font-size-base * 2.15)) !default;
$font-size-h3: ceil(($font-size-base * 1.7)) !default;
$font-size-h4: ceil(($font-size-base * 1.25)) !default;
$font-size-h5: $font-size-base !default;
$font-size-h6: ceil(($font-size-base * 0.85)) !default;
// Grid system variables
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$grid-float-breakpoint: $screen-sm-min !default;
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
// Container sizes
$container-tablet: (720px + $grid-gutter-width) !default;
$container-sm: $container-tablet !default;
$container-desktop: (940px + $grid-gutter-width) !default;
$container-md: $container-desktop !default;
$container-large-desktop: (1140px + $grid-gutter-width) !default;
$container-lg: $container-large-desktop !default;Usage Example:
// Customize colors before importing Bootstrap
$brand-primary: #007bff;
$brand-success: #28a745;
$font-size-base: 16px;
$grid-gutter-width: 20px;
// Import Bootstrap with custom variables
@import "bootstrap";Use Bootstrap mixins for custom component styling.
// Button mixins
@mixin button-variant($color, $background, $border);
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius);
// Grid mixins
@mixin make-row($gutter: $grid-gutter-width);
@mixin make-xs-column($columns, $gutter: $grid-gutter-width);
@mixin make-sm-column($columns, $gutter: $grid-gutter-width);
@mixin make-md-column($columns, $gutter: $grid-gutter-width);
@mixin make-lg-column($columns, $gutter: $grid-gutter-width);
// Utility mixins
@mixin clearfix();
@mixin center-block();
@mixin hide-text();
@mixin sr-only();
@mixin sr-only-focusable();
// Border radius mixins
@mixin border-top-radius($radius);
@mixin border-right-radius($radius);
@mixin border-bottom-radius($radius);
@mixin border-left-radius($radius);
@mixin border-radius($radius);
// Background variant mixins
@mixin bg-variant($parent, $color);
@mixin text-emphasis-variant($parent, $color);
// Component animation mixins
@mixin transition($transition...);
@mixin animation($animation);
@mixin transform($transformation);Usage Examples:
// Create custom button variant
.btn-custom {
@include button-variant(#fff, #6f42c1, #6f42c1);
}
// Create custom grid column
.my-sidebar {
@include make-md-column(3);
@include make-lg-column(2);
}
// Apply border radius
.rounded-box {
@include border-radius(8px);
padding: 20px;
background: $gray-lighter;
}
// Custom responsive container
.custom-container {
@include container-fixed();
@media (min-width: $screen-sm-min) {
width: $container-sm;
}
@media (min-width: $screen-md-min) {
width: $container-md;
}
}