Load bootstrap.css using require in backbone for a template? - css

Question

My main JS has the following code -
/*global require*/
'use strict';
require.config({
shim: {
backbone:{
deps:[
'underscore',
'jquery'
],
exports: 'Backbone'
},
bootstrap:{deps:['jquery']},
},
paths: {
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/underscore/underscore',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
text:'../bower_components/requirejs-text/text',
router: 'routes/router'
}
});
require([
'jquery',
'underscore',
'backbone',
'bootstrap',
'router'
//'text!bootstrapCSS'
], function ($, _, Backbone, undefined, mainRouter) {
var router = new mainRouter();
Backbone.history.start();
});
and view.home.js has the following code
define(
[
'jquery',
'underscore',
'backbone',
'bootstrap',
'text!templates/header.html',
'text!/bower_components/bootstrap/dist/css/bootstrap.css'
],
function($, _, Backbone, undefined, header, bootstrapCSS){
var HomeView = Backbone.View.extend({
el: '.header-container',
headerTemplate: _.template(header),
initialize: function(){
console.log("in view-home initialize")
this.render();
},
render: function(){
console.log("render header");
this.$el.html(this.headerTemplate());
console.log("render header complete i guess");
},
events: {},
});
return HomeView;
})
the above code is being used to render header.html in the main html. The header.html is using bootstrap classes for design primarily bootstrap.css. The page on load successfully loads everything including all the libraries but the view does not have the desired display - i.e. it seems to be devoid of bootstrap. Is there something wrong that I'm doing that my loaded html doesn't display bootstrap and how do I include bootstrap.css in my header.html through require.js in backbone.
Please help.