0

I have started a project in .NET Core and have used bower to install bootstrap for me. I'm having issues getting the bootstrap navigation styling to work. If I install bootstrap through bower, does it not come with everything from bootstrap? My button styling appears to be working. If I use the CDN, the styling appears for the navigation menu, so I know I'm using the right classes.

Here is what I have for the navigation menu.

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><button role="button" class="btn btn-danger">Danger</button></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
    </div>
</nav>

and here is my project structure.

Project structure

One of my potential issues may be that I'm using gulp as well. Here is my gulp tasks that handle scripts and styles. 

var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var cssmin = require('gulp-cssmin');

gulp.task('js', function () {
    // scripts
    gulp.src([
        './wwwroot/lib/jquery/dist/jquery.min.js',
        './wwwroot/lib/tether/dist/js/tether.min.js',
        './wwwroot/lib/bootstrap/dist/js/bootstrap.min.js'])
    .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./wwwroot/lib/Site'));

});

gulp.task('css', function () {
    // bootstrap 
    gulp.src([
        './wwwroot/lib/tether/dist/css/tether.min.css',
        './wwwroot/lib/bootstrap/dist/css/bootstrap-flex.min.css',
        './wwwroot/lib/bootstrap/dist/css/bootstrap-grid.min.css',
        './wwwroot/lib/bootstrap/dist/css/bootstrap-reboot.min.css',
        './wwwroot/lib/bootstrap/dist/css/bootstrap.min.css'])

    .pipe(concat('styles.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./wwwroot/lib/Site'));

});

and referencing in my head of the _Layout.cshtml, I have a reference to it as shown. 

<environment names="Development">
        @*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />*@        
        <link href="~/lib/Site/styles.css" rel="stylesheet" />
    </environment>

I want some understanding of either why not everything is included for bootstrap with bower, or what I am doing wrong in my gulpfile.

ddeamaral
  • 1,403
  • 2
  • 28
  • 43
  • 2
    I suggest look to see what version of bootstrap it pulled down, there is an issue affecting some people where it is pulling down bootstrap 4 even though they asked for 3.x https://github.com/aspnet/Tooling/issues/665 – Joe Audette Nov 26 '16 at 19:19
  • @JoeAudette how do I make sure it has the right version? When I open bootstrap.css, it says "Bootstrap v4.0.0-alpha.5". So I think it is doing what you're suggesting. What's an alternative way to pull down the correct one? – ddeamaral Nov 27 '16 at 01:54
  • @JoeAudette thank you, you were right. The wrong version was installed. I followed the directions from here http://stackoverflow.com/questions/37584520/bootstrap-3-3-6-jquery-2-2-4-version-exception/38460014#38460014 and found an answer from the github issues you had linked. – ddeamaral Nov 27 '16 at 02:04

0 Answers0