This project contains all the Bootstrap Sass source files. This project will be useful to create new themes using Sass.

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


1 - Create a new project with next structure:

  ├─ pubspec.yaml
  ├─ web
  │  ├─ index.html
  │  ├─ _variables.scss
  │  ├─ theme.scss
  │  └─ ... other files and folders ...
  └─ lib
     └─ ... lib files and folders ...

2 - In the pubspec.yaml file add the bootstrap_sass and sass_builder dependencies as bellow:

name: bootstrap_sass_example # change this line to have your library name
description: An absolute bare-bones web app.

  sdk: '>=2.0.0 <3.0.0'

  bootstrap_sass: ^4.2.1

  build_runner: ^1.0.0
  build_web_compilers: ^1.0.0
  sass_builder: ^2.0.0

3 - Then in _variables.scss add the variables you want to modify

//== Colors

$primary:          #e72b42;
$secondary:        #73A839;
$info:             #033C73;
$warning:          #DD5600;
$danger:           #22afc7;

4- In the theme.scss add next code:

@import "variables";
@import "package:bootstrap_sass/scss/bootstrap";

5 - Then in the index.html you will add the link to theme.css as bellow:

  <link rel="stylesheet" href="theme.css">

so you will end up with an index.html file like next one:

<!DOCTYPE html>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="scaffolded-by" content="">
  <link rel="stylesheet" href="theme.css">
  <link rel="icon" href="favicon.ico">
  <script defer src="main.dart.js"></script>


<button class="btn btn-primary">Bootstrap Primary Button</button>
<button class="btn btn-secondary">Bootstrap Secondary Button</button>
<button class="btn btn-success">Bootstrap Success Button</button>
<button class="btn btn-info">Bootstrap Info Button</button>
<button class="btn btn-danger">Bootstrap Danger Button</button>
<button class="btn btn-warning">Bootstrap Warning Button</button>


6 - Finally to run this project you will need to use next command:

webdev serve


bootstrap_sass has a number of major contributors:

and a significant number of other contributors.

The Dart port is made by: Luis Vargas

Bugs and feature requests

Have a bug or a feature request to bootstrap core? Please open a new issue at

Have a bug or a feature request to bootstrap_sass Dart port? Please open a new issue at

Copyright and license

Code and documentation copyright 2011-2019 the Bootstrap Authors and Twitter, Inc. Code released under the MIT License. Docs released under Creative Commons.