CODEWITHSUNDEEP
twitter-bootstrap
bilge
bilge

Reputation: 93

Simple twitter bootstrap example doesn't display as expected

I pasted the example 'Fluid Nesting' in this page:http://twitter.github.com/bootstrap/scaffolding.html

    <!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.min.css" rel="stylesheet" media="screen">
        </head>
      <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <div class="row-fluid">
        <div class="span12">
        Fluid 12
        <div class="row-fluid">
        <div class="span6">
          Fluid 6
          <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>
  </body>
</html>

This is what I get:

http://s4.postimage.org/wpnf9zxbh/Untitled.png

My html page is in the same directory as bootstrap's css and js folders so 'css/bootstrap.min.css' link is correct.

Thanks in advance

Upvotes: 2

Views: 1441

Answers (1)

tharumax
tharumax

Reputation: 1261

I think you are getting the correct rendering for the resources you have included. May be you are not getting the same styling in the Bootstrap document page.

In the Bootstrap document page they have included another resource file for styling. ( You can find out this by viewing the source of the page)

http://twitter.github.com/bootstrap/assets/css/docs.css

Specific styling in the page was achieved by appending show-grid class to the div elements with row-fluid class.

Edited code as below.

<!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.min.css" rel="stylesheet" media="screen">
        <link href='http://twitter.github.com/bootstrap/assets/css/docs.css' rel='stylesheet'>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <div class="row-fluid show-grid">
            <div class="span12">
                Fluid 12
                <div class="row-fluid show-grid">
                    <div class="span6">
                        Fluid 6
                        <div class="row-fluid show-grid">
                            <div class="span6">Fluid 6</div>
                            <div class="span6">Fluid 6</div>
                        </div>
                    </div>
                    <div class="span6">Fluid 6</div>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions