CODEWITHSUNDEEP
csstwitter-bootstrap
macsplean
macsplean

Reputation: 609

Bootstrap not working

All I am trying to do is to get some text to begin in the middle of the screen.

Here is the code below. Note that I have included the minified bootstrap css and js files in my project directory along with my html file without subdirectories. I got those files from the precompiled Bootstrap 3.0.1 download. I also tried using the links to the CDN instead. Still didn't work. When I open this code in Firefox I don't see any positioning active at all. Other Bootstrap styles didn't work either, like I tried to do <p class = "large"> blah </p> and it didn't make the text large.

NOTE: To make it easier for people to test the page, I replaced links to local bootstrap files with a link to the bootstrap CDN file. 

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row">
      <div class="span3 offset9">
        <p class="large">This Text</p>
      </div>
    </div>

    <h1>Hello, world!</h1>
  </body>
</html>

Upvotes: 1

Views: 14664

Answers (2)

jack
jack

Reputation: 82

You forgot to import the javascript part of bootstrap.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Upvotes: 0

ZimTis
ZimTis

Reputation: 179

in your jsfiddle, the bootstrap stuff isn't correctly used, all it needs is

<body>
    <div class="row">
    <div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>

and some externe resouces, http://jsfiddle.net/N5n4Z/1/, is a Bootstrap 2 skeleton, with your example in it, and it work. Well unless the preview window is to small. If the Window is to small, bootstrap, due to its media querys, automatically arrange all rows underneath, and ignore every offset.

On a side note, why not using the new Bootstrap 3? http://getbootstrap.com/

Update

Since you use Bootstrap 3 now, you have to change the markup a bit.

<div class="row">
    <div class="col-md-6 col-md-offset-3">
    <p>test loc</p>
</div>

fiddle
bootstrap docu

Upvotes: 2

Related Questions