Convert Figma logo to code with AI

twbs logobootstrap-sass

Official Sass port of Bootstrap 2 and 3.

12,575
3,527
12,575
29
View on GitHubView on NPM

Top Related Projects

twbs's avatar

bootstrap

170,434

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

foundation's avatar

foundation-sites

29,671

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

jgthms's avatar

bulma

49,259

Modern CSS framework based on Flexbox

tailwindlabs's avatar

tailwindcss

83,915

A utility-first CSS framework for rapid UI development.

Semantic-Org's avatar

Semantic-UI

51,113

Semantic is a UI component framework based around useful principles from natural language.

uikit's avatar

uikit

18,293

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Quick Overview

Bootstrap-sass is the official Sass port of Bootstrap, a popular front-end framework for developing responsive and mobile-first websites. It allows developers to use Sass variables and mixins to customize Bootstrap's styles, making it easier to integrate Bootstrap into Sass-based projects.

Pros

  • Seamless integration with Sass-based projects
  • Customizable using Sass variables and mixins
  • Maintains compatibility with the original Bootstrap framework
  • Enables more efficient and modular CSS development

Cons

  • Requires knowledge of Sass syntax and compilation
  • May have a steeper learning curve for developers new to Sass
  • Potential for increased complexity in project setup
  • Slightly larger file size compared to vanilla CSS Bootstrap

Code Examples

  1. Customizing Bootstrap variables:
// Custom variables
$primary: #007bff;
$font-size-base: 1rem;

// Import Bootstrap
@import "bootstrap";
  1. Using Bootstrap mixins:
.custom-button {
  @include button-variant($primary, $primary);
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
}
  1. Creating a custom grid column:
.custom-col {
  @include make-col-ready();
  @include make-col(6);
  
  @include media-breakpoint-up(md) {
    @include make-col(4);
  }
}

Getting Started

  1. Install bootstrap-sass using npm:
npm install bootstrap-sass
  1. Import Bootstrap in your main Sass file:
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
  1. Customize Bootstrap by overriding variables before the import:
$primary: #007bff;
$font-size-base: 1rem;

@import "~bootstrap-sass/assets/stylesheets/bootstrap";
  1. Compile your Sass files using your preferred build tool (e.g., webpack, gulp, or sass command-line tool).

Competitor Comparisons

twbs logo

bootstrap

170,434

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Pros of Bootstrap

  • Larger community and more frequent updates
  • Easier integration with modern JavaScript frameworks
  • More comprehensive documentation and examples

Cons of Bootstrap

  • Larger file size, potentially impacting page load times
  • Less flexibility for customization compared to Sass version
  • Steeper learning curve for developers new to CSS frameworks

Code Comparison

Bootstrap (CSS):

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

Bootstrap-sass (SCSS):

$btn-primary-color: #fff;
$btn-primary-bg: #007bff;
$btn-primary-border: #007bff;

.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

The Bootstrap-sass version allows for easier customization of variables and mixins, while the standard Bootstrap version provides a more straightforward approach with pre-defined styles.

Bootstrap-sass is better suited for projects requiring extensive customization and those already using Sass in their workflow. Bootstrap is ideal for rapid prototyping and projects that don't require significant style modifications.

foundation logo

foundation-sites

29,671

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Pros of Foundation

  • More flexible and customizable grid system
  • Advanced features like responsive typography and motion UI
  • Better support for accessibility out of the box

Cons of Foundation

  • Steeper learning curve for beginners
  • Smaller community and ecosystem compared to Bootstrap
  • Less frequent updates and maintenance

Code Comparison

Bootstrap-sass:

@import "bootstrap";

.custom-component {
  @extend .card;
  background-color: $primary;
}

Foundation:

@import "foundation";

.custom-component {
  @include card-container;
  background-color: $primary-color;
}

Both frameworks offer similar functionality, but Foundation tends to use mixins more extensively, while Bootstrap often relies on extending pre-defined classes. Foundation's approach can lead to more flexible and customizable code, but it may require more effort to implement.

Foundation's grid system is more powerful and flexible, allowing for complex layouts with less markup. However, Bootstrap's grid is simpler to use and may be sufficient for many projects.

Overall, Foundation is better suited for developers who need more control and customization, while Bootstrap-sass is ideal for rapid prototyping and projects that prioritize ease of use and widespread adoption.

jgthms logo

bulma

49,259

Modern CSS framework based on Flexbox

Pros of Bulma

  • Lightweight and modular, with a smaller file size than Bootstrap
  • Built with Flexbox, offering more flexible and modern layouts
  • Simple and intuitive class naming conventions

Cons of Bulma

  • Less extensive ecosystem and third-party components compared to Bootstrap
  • Fewer customization options out of the box
  • Steeper learning curve for developers familiar with Bootstrap's grid system

Code Comparison

Bulma:

.columns {
  display: flex;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
}

Bootstrap:

.row {
  @include make-row();
}
.col {
  @include make-col-ready();
}

Bulma uses a more straightforward approach with Flexbox, while Bootstrap relies on mixins for its grid system. Bulma's code is often more readable and requires less nesting, but Bootstrap offers more flexibility through its extensive set of mixins and variables.

Both frameworks provide responsive design capabilities, but their implementation differs. Bulma uses a mobile-first approach with simple class modifiers, while Bootstrap uses a more complex system of breakpoints and grid classes.

Overall, Bulma is a good choice for developers who prefer a lightweight, modern framework with a focus on simplicity. Bootstrap, on the other hand, offers a more comprehensive solution with a larger ecosystem and more extensive customization options.

tailwindlabs logo

tailwindcss

83,915

A utility-first CSS framework for rapid UI development.

Pros of Tailwind CSS

  • Highly customizable with a utility-first approach
  • Smaller file sizes due to purging unused styles
  • Faster development with pre-built utility classes

Cons of Tailwind CSS

  • Steeper learning curve for developers used to traditional CSS
  • Can lead to longer class names in HTML
  • Requires additional configuration for optimal performance

Code Comparison

Bootstrap Sass:

.btn-primary {
  @include button-variant($primary, $primary);
}

Tailwind CSS:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Summary

Bootstrap Sass is a Sass-powered version of the popular Bootstrap framework, offering pre-built components and a grid system. Tailwind CSS, on the other hand, is a utility-first CSS framework that provides low-level utility classes to build custom designs.

While Bootstrap Sass offers a quicker start with pre-designed components, Tailwind CSS provides more flexibility and customization options. Bootstrap Sass may be easier for beginners, but Tailwind CSS can lead to more efficient development once mastered.

The choice between the two depends on project requirements, team expertise, and desired level of customization.

Semantic-Org logo

Semantic-UI

51,113

Semantic is a UI component framework based around useful principles from natural language.

Pros of Semantic-UI

  • More intuitive class naming conventions, making it easier for developers to understand and use
  • Offers a wider range of UI components and themes out of the box
  • Better customization options with a theming system based on LESS

Cons of Semantic-UI

  • Steeper learning curve due to its unique approach and terminology
  • Less widespread adoption and community support compared to Bootstrap
  • Larger file size, which may impact page load times

Code Comparison

Semantic-UI button example:

<button class="ui primary button">
  Save
</button>

Bootstrap-sass button example:

<button class="btn btn-primary">
  Save
</button>

Both frameworks provide similar functionality, but Semantic-UI uses more descriptive class names. The ui class in Semantic-UI indicates that the element is part of the UI framework, while Bootstrap relies on shorter, more concise class names.

Semantic-UI's approach to naming conventions aims to make the code more readable and self-explanatory, potentially improving maintainability. However, this can also lead to longer class names and potentially more verbose HTML.

Bootstrap-sass, on the other hand, offers a more compact syntax that may be quicker to write but might be less immediately clear to newcomers. Its widespread adoption means that many developers are already familiar with its conventions, which can be an advantage in team settings.

uikit logo

uikit

18,293

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Pros of UIkit

  • More lightweight and flexible, with a modular architecture
  • Offers a wider range of pre-built components and layouts
  • Provides a powerful customization system with SASS variables and mixins

Cons of UIkit

  • Smaller community and ecosystem compared to Bootstrap
  • Less widespread adoption, potentially leading to fewer resources and third-party integrations
  • Steeper learning curve for developers familiar with Bootstrap's conventions

Code Comparison

Bootstrap-sass:

@import "bootstrap";

.custom-button {
  @extend .btn;
  @extend .btn-primary;
}

UIkit:

@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";
@import "uikit/src/scss/uikit-theme.scss";

.custom-button {
  @extend .uk-button;
  @extend .uk-button-primary;
}

Both frameworks offer SASS support, but UIkit provides more granular control over imports and theming. UIkit's modular approach allows for more selective inclusion of components, potentially resulting in smaller file sizes. However, Bootstrap's simpler import structure may be easier for beginners to grasp and implement quickly.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Bootstrap 3 for Sass

Gem Version npm version Bower Version Build Status

bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

This is Bootstrap 3. For Bootstrap 4 use the Bootstrap rubygem if you use Ruby, and the main repo otherwise.

Installation

Please see the appropriate guide for your environment of choice:

a. Ruby on Rails

bootstrap-sass is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.

gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

bundle install and restart your server to make the files available through the pipeline.

Import Bootstrap styles in app/assets/stylesheets/application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.

Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

Bootstrap JavaScript depends on jQuery. If you're using Rails 5.1+, add the jquery-rails gem to your Gemfile:

gem 'jquery-rails'

$ bundle install

Require Bootstrap Javascripts in app/assets/javascripts/application.js:

//= require jquery
//= require bootstrap-sprockets

bootstrap-sprockets and bootstrap should not both be included in application.js.

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.

Bower with Rails

When using bootstrap-sass Bower package instead of the gem in Rails, configure assets in config/application.rb:

# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
  config.sass.load_paths << bower_path
  config.assets.paths << bower_path
end
# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$)
# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Replace Bootstrap @import statements in application.scss with:

$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";

Replace Bootstrap require directive in application.js with:

//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets

Rails 4.x

Please make sure sprockets-rails is at least v2.1.4.

Rails 3.2.x

bootstrap-sass is no longer compatible with Rails 3. The latest version of bootstrap-sass compatible with Rails 3.2 is v3.1.1.0.

b. Bower

bootstrap-sass Bower package is compatible with node-sass 3.2.0+. You can install it with:

$ bower install bootstrap-sass

Sass, JS, and all other assets are located at assets.

By default, bower.json main field list only the main _bootstrap.scss and all the static assets (fonts and JS). This is compatible by default with asset managers such as wiredep.

Node.js Mincer

If you use mincer with node-sass, import Bootstrap like so:

In application.css.ejs.scss (NB .css.ejs.scss):

// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";

In application.js:

//= require bootstrap-sprockets

See also this example manifest.js for mincer.

c. npm / Node.js

$ npm install bootstrap-sass

Configuration

Sass

By default all of Bootstrap is imported.

You can also import components explicitly. To start with a full list of modules copy _bootstrap.scss file into your assets as _bootstrap-custom.scss. Then comment out components you do not want from _bootstrap-custom. In the application Sass file, replace @import 'bootstrap' with:

@import 'bootstrap-custom';

Sass: Number Precision

bootstrap-sass requires minimum Sass number precision of 8 (default is 5).

Precision is set for Ruby automatically when using the sassc-rails gem. When using the npm or Bower version with Ruby, you can set it with:

::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Sass: Autoprefixer

Bootstrap requires the use of Autoprefixer. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.

To match upstream Bootstrap's level of browser compatibility, set Autoprefixer's browsers option to:

[
  "Android 2.3",
  "Android >= 4",
  "Chrome >= 20",
  "Firefox >= 24",
  "Explorer >= 8",
  "iOS >= 6",
  "Opera >= 12",
  "Safari >= 6"
]

JavaScript

assets/javascripts/bootstrap.js contains all of Bootstrap's JavaScript, concatenated in the correct order.

JavaScript with Sprockets or Mincer

If you use Sprockets or Mincer, you can require bootstrap-sprockets instead to load the individual modules:

// Load all Bootstrap JavaScript
//= require bootstrap-sprockets

You can also load individual modules, provided you also require any dependencies. You can check dependencies in the Bootstrap JS documentation.

//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown

Fonts

The fonts are referenced as:

"#{$icon-font-path}#{$icon-font-name}.eot"

$icon-font-path defaults to bootstrap/ if asset path helpers are used, and ../fonts/bootstrap/ otherwise.

When using bootstrap-sass with Compass, Sprockets, or Mincer, you must import the relevant path helpers before Bootstrap itself, for example:

@import "bootstrap-compass";
@import "bootstrap";

Usage

Sass

Import Bootstrap into a Sass file (for example, application.scss) to get all of Bootstrap's styles, mixins and variables!

@import "bootstrap";

You can also include optional Bootstrap theme:

@import "bootstrap/theme";

The full list of Bootstrap variables can be found here. You can override these by simply redefining the variable before the @import directive, e.g.:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Eyeglass

Bootstrap is available as an Eyeglass module. After installing Bootstrap via NPM you can import the Bootstrap library via:

@import "bootstrap-sass/bootstrap"

or import only the parts of Bootstrap you need:

@import "bootstrap-sass/bootstrap/variables";
@import "bootstrap-sass/bootstrap/mixins";
@import "bootstrap-sass/bootstrap/carousel";

Version

Bootstrap for Sass version may differ from the upstream version in the last number, known as PATCH. The patch version may be ahead of the corresponding upstream minor. This happens when we need to release Sass-specific changes.

Before v3.3.2, Bootstrap for Sass version used to reflect the upstream version, with an additional number for Sass-specific changes. This was changed due to Bower and npm compatibility issues.

The upstream versions vs the Bootstrap for Sass versions are:

UpstreamSass
3.3.4+same
3.3.23.3.3
<= 3.3.13.3.1.x

Always refer to CHANGELOG.md when upgrading.

Development and Contributing

If you'd like to help with the development of bootstrap-sass itself, read this section.

Upstream Converter

Keeping bootstrap-sass in sync with upstream changes from Bootstrap used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.

Note: if you're just looking to use Bootstrap 3, see the installation section above.

Upstream changes to the Bootstrap project can now be pulled in using the convert rake task.

Here's an example run that would pull down the master branch from the main twbs/bootstrap repo:

rake convert

This will convert the latest LESS to Sass and update to the latest JS. To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:

rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]

The latest converter script is located here and does the following:

  • Converts upstream Bootstrap LESS files to its matching SCSS file.
  • Copies all upstream JavaScript into assets/javascripts/bootstrap, a Sprockets manifest at assets/javascripts/bootstrap-sprockets.js, and a concatenation at assets/javascripts/bootstrap.js.
  • Copies all upstream font files into assets/fonts/bootstrap.
  • Sets Bootstrap::BOOTSTRAP_SHA in version.rb to the branch sha.

This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output). Please submit GitHub issues tagged with conversion.

Credits

bootstrap-sass has a number of major contributors:

and a significant number of other contributors.

You're in good company

bootstrap-sass is used to build some awesome projects all over the web, including Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq and kandan.

NPM DownloadsLast 30 Days