Twitter Bootstrap Question posted in

Bootstrap JavaScript with Gulp – Twitter bootstrap

I’m new to gulp and want to add bootstrap to my project.
I already added SASS Bootstrap. That was no problem because I found a good documentation. Now I also need to add the javascript of bootstrap to my project.
I tried to follow this documentation and added just the API to my index.html at the end of my body.
Like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

But I wont work. Do I have to include the bootstrap.js in an extra js? Just like I importet bootstrap.sass to my main.sass?

I can’t find a good documentation and don’t know what to do now.

Tags:

2

Answers


  1. 0

    Check out this setup guide for configuring Bootstrap Sass using Bower and Gulp.

    Setting up Gulp, Bower, Bootstrap Sass, & FontAwesome (Barnes, Eric L.)

    You should compile all your CSS (including third-party libraries) into one minified CSS file. Saves bandwidth (and loading time) and makes it harder for people to reverse engineer your websites.

    Bower

    bower install bootstrap-sass-official --save

    {
  "devDependencies": {
    "gulp":           "3.9.1",
    "gulp-bower":     "0.0.13",
    "gulp-notify":    "3.0.0",
    "gulp-ruby-sass": "2.1.1"
  }
}

    NPM

    npm install gulp gulp-ruby-sass gulp-notify gulp-bower --save-dev

    Gulp

    var gulp   = require('gulp'),
    sass   = require('gulp-ruby-sass'),
    notify = require("gulp-notify"),
    bower  = require('gulp-bower');

var config = {
    sassPath : './resources/sass',
    bowerDir : './bower_components'
}

gulp.task('bower', function() {
  return bower().pipe(gulp.dest(config.bowerDir))
});

gulp.task('css', function() {
  return gulp.src(config.sassPath + '/style.scss')
    .pipe(sass({
        style: 'compressed',
        loadPath: [
          './resources/sass',
          config.bowerDir + '/bootstrap-sass-official/assets/stylesheets'
        ]
      })
      .on("error", notify.onError(function(error) {
        return "Error: " + error.message;
      })))
    .pipe(gulp.dest('./public/css'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(config.sassPath + '/**/*.scss', ['css']);
});

gulp.task('default', ['bower', 'css']);

    Sass

    /*
 *  File: style.scss
 */
// Import Bootstrap
@import "bootstrap";

// ...
    Login or Signup to reply.
  2. 0

    Yes, you have to import bootstrap.js as well. It is important that you import that in the head of your HTML.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search