CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Milan Stojanovic
Milan Stojanovic

Reputation: 307

Bootstrap 3.1.1 CSS not working

Here's an interesting problem.

I've started going through AngularJS training on Pluralsight. I'm still pretty much at the beginning, so it's still just basics, creating a controller, passing the data from $scope to view and stuff like that. One problem that I've ran into is that Bootstrap CSS is not working. The path to the stylesheet is all good, when I open up the F12 in Chrome, it shows that the CSS and other scripts are loaded properly, but classes won't apply to certain elements (span4, navbar, and so forth). Actually, none of the style rules apply.

Here's the markup:

<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
    <meta charset="utf-8" />
    <title>Event Registration</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="navbar inner">
                <ul class="nav"></ul>
            </div>
        </div>
        <div>
            <div class="row">
                <div class="span12">
                    <h2>{{event.name}}</h2>
                </div>
            </div>
            <div class="row">
                <div class="span3">
                    <div><strong>Date:</strong> {{event.date}}</div>
                    <div><strong>Time:</strong> {{event.time}}</div>
                </div>
                <div class="span4">
                    <address>
                        <strong>Address: </strong><br />
                        {{event.location.address}}<br />
                        {{event.location.city}}, {{event.location.province}}
                    </address>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>    
    <script src="lib/angular/angular.js"></script>
    <script src="js/app.js"></script>
    <script src="js/Controllers/EventController.js"></script>
</body>
</html>

Btw, I'm using Visual Studio for this, I've even tried to give a full path to the CSS, but it's not working. I've tried to create the same page in other text editors, I've tried to remove any reference to Angular, but with no luck.

Upvotes: 0

Views: 354

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

The span* classes no longer exists in Bootstrap 3. Use the col-* classes instead.

Bootstrap 2.x to 3 migraton guide

Using your code it would look more like this in Bootstrap 3..

http://www.bootply.com/122529

Upvotes: 2

Related Questions