CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
oneday
oneday

Reputation: 1629

Bootstrap not working - where's the error?

Could somebody please show me an error in this code? I checked the file structure over and over and it seems ok, anyway, in the Network tab I only get a warning "Provisional headers are shown" but it seems like the files are fetched.

What happens is that although I made 3 collumns, I can see them one under another, full width of the container. The button css seems to be working though. 

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 101 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-4">
                fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd
    </div>
    <div class="col-md-4">
                fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd
    </div>
    <div class="col-md-4">
                fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd fdsf fds lkj ah soij saklmds a;sldj nas.d iashd aslkdm aosifh saf safd
    </div>
    <button class='btn btn-default'>fdsfds</button>
</div>
</div>

  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

Upvotes: 0

Views: 990

Answers (4)

Daniel Cheung
Daniel Cheung

Reputation: 4819

What you should see:

What you should see

Your code:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">

Fix:

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

You didn't declare to the browser that the .css is indeed a stylesheet (for older browsers). Also, you don't need to use media="screen". In the new HTML5, you can drop type="text/css" too, but I would keep it there just to be safe this year(2014).

Upvotes: 1

Beri
Beri

Reputation: 11600

Tried putting your button in one of columns? sor exampel col-md-12?

Try this:

  <div class="container">
    <div class="row">
        <div class="col-sm-4"><p>Box 1</p></div>
        <div class="col-sm-4"><p>Box 2</p></div>
        <div class="col-sm-4"><p>Box 3</p></div>
    </div>
  </div>

You could check it here: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=grid-layout-for-medium-devices

Upvotes: 0

Joshua
Joshua

Reputation: 638

You need to include the bootstrap.min.js file not the bootstrap.js!

For example:

<script src="js/bootstrap.min.js"></script>

Also, check that that your folders acutally contain the files.

Read here: http://getbootstrap.com/getting-started/

Kind Regards, Josh

Upvotes: 0

feldeOne
feldeOne

Reputation: 417

Hmm , I also cannot find any errors in your code, are the bootraps files (bootstrap.js, css ..) are ok ?? I would try to download the newest Bootsraps and try it again.

Upvotes: 2

Related Questions