CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
HouseMistal
HouseMistal

Reputation: 7

Bootstrap container class doesn't work

I'm currently trying Bootstrap in website development but it seems that the container class, which should center the content isn't working. I can't seem to find the problem as to why it won't work. I've tried a different text editor and downloaded bootstrap again but nothing happens. Text editor I'm using is Sublime text 2.

Thanks for any help! :)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample One</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
</head>
<body class="container">
    <header class="row">
        <hgroup class="span8">
            <h1><a href="img/logo.png" title="Visit website"></a></h1>
            <h2>Sample website design</h2>
        </hgroup>
        <nav class="span4">
            <ul>
                <li><a href="" title="About">About Us</a></li>
                <li><a href="" title="Work">Our Work</a></li>
                <li><a href="" title="Contact">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <section role="main">
        <h1>About</h1>
        <ul>
            <li><a href="" title="Facebook">Facebook</a></li>
            <li><a href="" title="Twitter">Twitter</a></li>
        </ul>
        <img alt="bg" src=""> 
        <article>
            <h1>Title of the article</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
        <section>
            <h1>Portfolio</h1>
            <ul>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
            </ul>
        </section>
        <article>
            <h1>Contact</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
    </section>
    <footer class="row">
        <small class="span8">&copy; 2013 All Right Reserved. Designed by Renz</small>
    </footer>
</body>
</html>

Upvotes: 0

Views: 13815

Answers (4)

Sun
Sun

Reputation: 17

This has been changed in 3x : .col-md-* rather than span* as:

<header class="row"> <hgroup class="col-md-8">

Upvotes: -1

Dre
Dre

Reputation: 2953

Typically you would wrap all your content in a <div class="container">, not by applying the class to the <body>. Like so:

body
  -> .container
     -> .row
        -> .span6
           -> Your content
        -> .span6
           -> More content
     -> .row etc.

Upvotes: 3

Alhalabi
Alhalabi

Reputation: 1

No body must give the class of container but, you must use a new element to the container example: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample One</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <header class="row">
        <hgroup class="span8">
            <h1><a href="img/logo.png" title="Visit website"></a></h1>
            <h2>Sample website design</h2>
        </hgroup>
        <nav class="span4">
            <ul>
                <li><a href="" title="About">About Us</a></li>
                <li><a href="" title="Work">Our Work</a></li>
                <li><a href="" title="Contact">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <section role="main">
        <h1>About</h1>
        <ul>
            <li><a href="" title="Facebook">Facebook</a></li>
            <li><a href="" title="Twitter">Twitter</a></li>
        </ul>
        <img alt="bg" src=""> 
        <article>
            <h1>Title of the article</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
        <section>
            <h1>Portfolio</h1>
            <ul>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
                <li>
                    <img src="">
                    <h2>Brand name</h2>
                    <p>sdaid dainsd iansd aisndla dansld</p> 
                </li>
            </ul>
        </section>
        <article>
            <h1>Contact</h1>
            <p>Sony has revealed lifetime sales of the PS3 has passed another milestone, and announced 300 new games are coming this Christmas.</p>
        </article>
    </section>
    <footer class="row">
        <small class="span8">&copy; 2013 All Right Reserved. Designed by Renz</small>
    </footer>
</div>
</body>
</html>

Upvotes: 0

ravb79
ravb79

Reputation: 752

Don't place .container on the body, wrap your content in a DIV instead and then apply the container class on that DIV.

Upvotes: 2

Related Questions