Search code examples
htmlcsstwitter-bootstrapcodepen

Codepen vs Local not matching up

I edited the settings in codepen to use bootstrap for css but it will not display page as it does locally.

Here is what the page looks like locally. enter image description here

Here is the local code with the paragraph content shortened.

    <html>
    <head>
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="font-awesome-4.6.1/fonts/fontawesome-webfont.svg">
        <style>
            body{
                margin: 50px;
                background-color: black;
            }
            .container{
                border: 3px solid red;
                width: 80%;
            }
        </style>
    </head>
    <body>
        <div class="container panel panel-default">
            <div class="row text-center">
                <div class="col-xs-12">
                <h2>William "Bill" Paxton</h2>
                    <p><em>May 17, 1955 – February 25, 2017</em></p>
                </div>
            </div>
            <figure class="figure text-center">
                <img src="images/download.jpeg" width="30%" alt="image of Bill Paxton">
                <figcaption class="figure-caption">An image of Bill Paxton</figcaption>
            </figure>
            <div class="well">
                <section>
                    <p>...</p>
                    <h3>Early Life</h3>
                    <p>...</p>
                    <h3>Career</h3>
                    <p>...</p>
                    <h3>Personal Life</h3>
                    <p>...</p>
                </section>
            </div>
            <div class="well">
                <section>
                    <h3>Click <a href="http://www.imdb.com/find?ref_=nv_sr_fn&q=bill+paxton&s=all" target="_blank">here</a> check out is filmography on IMDB</h3>
                </section>
            </div>
        </div>
    </body>
</html>

Here is what it looks like on codepen.

http://codepen.io/centem/pen/PbNbvR

What am I missing? Thanks in advance.

Solution

  • The default cdn that codepen.io uses for Bootstrap is for the Bootstrap 4 alpha. I've had problems with things not displaying properly as well.

    Use this cdn instead: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css