我使用的 HTML 代码无法正确显示？

Question

I am using this pre-made profile code. They have given me the html code to it. So I tried using it. And all it gave me was the wrong display. I have linked the picture of what it should be displayed as. And to what it is displaying when I use it.

Also sorry if the code is a little wonky. I just got started with it. Thanks to whom ever helps me!

What it should display as

What it does instead.

Code:

<div class="container">
<div class="row clearfix well">
    <div class="col-md-2 column">
        <img class="img-thumbnail" alt="140x140" 
src="http://lorempixel.com/140/140/" />
    </div>
    <div class="col-md-8 column">
        <blockquote>
            <p>
                Potter Guy
            </p> <small>21 / M / Single / Straight <cite>London 
England</cite></small>
        </blockquote>
    </div>
    <div class="col-md-2 column">

             <button class="btn btn-default btn-block" type="button">
                Poke
             </button>
             <button class="btn btn-default btn-block" type="button">
                Message
             </button>
             <button class="btn btn-default btn-block" type="button">
                Save
             </button>


    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" id="tabs-444468">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-200304" data-toggle="tab">About</a>
                </li>
                <li>
                    <a href="#panel-567649" data-toggle="tab">Photos</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="panel-200304">
                     <div class="row clearfix">
                        <div class="col-md-8 column">
                            <p>
                                <strong>About me</strong><br/>
                                it's just awful to write this stuff and i 
hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>What i am doing with my 
life</strong><br/>
                                it's just awful to write this stuff and i 
  hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
 person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>I am really good at ?</strong><br/>
                                it's just awful to write this stuff and i 
hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>The first thing you will notice 
about me?</strong><br/>
                                it's just awful to write this stuff and i 
hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>I cant live without ?</strong><br/>
                                My Mobile
                                My Car
                                My Dog
                            </p>
                            <hr/>
                            <p class="well">
                            <strong>I am looking for ?</strong><br/>
                                 someone good with heart
                            </p>
                        </div>
                        <div class="col-md-4 column">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            Details
                                        </th>
                                        <th>
                                            His/ Her
                                        </th> 
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            Last Online
                                        </td>
                                        <td>
                                            1 hour ago
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Ethinicity
                                        </td>
                                        <td>
                                            White
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Height
                                        </td>
                                        <td>
                                            5' 8"
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Body type
                                        </td>
                                        <td>
                                            Slim
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Diet
                                        </td>
                                        <td>
                                            Veg
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Smoke
                                        </td>
                                        <td>
                                            No
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Drink
                                        </td>
                                        <td>
                                            Occasionally
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Drugs
                                        </td>
                                        <td>
                                            No
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Religion
                                        </td>
                                        <td>
                                            Hindu
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Sign
                                        </td>
                                        <td>
                                            Vergo
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Education
                                        </td>
                                        <td>
                                            Masters
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Job
                                        </td>
                                        <td>
                                            Consultant
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Income
                                        </td>
                                        <td>
                                            5 figures
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Language
                                        </td>
                                        <td>
                                            <ol>
                                             <li>English</li>
                                             <li>Spanish</li>
                                             <li>Hindi</li>
                                             </ol>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="panel-567649">
                                     <div class="row clearfix">
    <div class="col-md-8 column">
        <img alt="140x140" src="http://lorempixel.com/140/140/" /><img 
alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140" 
src="http://lorempixel.com/140/140/" /><img alt="140x140" 
src="http://lorempixel.com/140/140/" />
    </div>
    <div class="col-md-4 column">
        <p>
            Lorem ipsum dolor sit amet, <strong>consectetur adipiscing 
elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac 
habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. 
Nam 
purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere 
diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin 
consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id 
bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum 
nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, 
pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat 
eu.</small>
        </p>
    </div>
</div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>

Answer 1

The provided HTML uses Bootstrap styling. Bootstrap is a commonly used library for user interfaces.

To use Bootstrap, you would include a link tag referencing the bootstrap CSS file in the head as well as a script tag referencing the bootstrap javascript file at the bottom of the body like so:

<!DOCTYPE html>
<html>
  <head>
    <title>Your web page's title</title>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>
  <body>

    <div class="container">
      <div class="row clearfix well">
        <div class="col-md-2 column">
          <img class="img-thumbnail" alt="140x140" 
               src="http://lorempixel.com/140/140/" />
        </div>
        <div class="col-md-8 column">
          <blockquote>
            <p>
              Potter Guy
            </p> <small>21 / M / Single / Straight <cite>London 
            England</cite></small>
          </blockquote>
        </div>
        <div class="col-md-2 column">

          <button class="btn btn-default btn-block" type="button">
            Poke
          </button>
          <button class="btn btn-default btn-block" type="button">
            Message
          </button>
          <button class="btn btn-default btn-block" type="button">
            Save
          </button>


        </div>
      </div>
      <div class="row clearfix">
        <div class="col-md-12 column">
          <div class="tabbable" id="tabs-444468">
            <ul class="nav nav-tabs">
              <li class="active">
                <a href="#panel-200304" data-toggle="tab">About</a>
              </li>
              <li>
                <a href="#panel-567649" data-toggle="tab">Photos</a>
              </li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="panel-200304">
                <div class="row clearfix">
                  <div class="col-md-8 column">
                    <p>
                      <strong>About me</strong><br/>
                      it's just awful to write this stuff and i 
                      hate having to sell myself or make myself seem like some amazing superhuman. 
                      i have some generic interests, im a bit shy, and i dont play games and just 
                      want be there for a girl and make her feel like the most unique and special 
                      person, so this is one of the most annoying experiences ever. i dont even 
                      know why i bother with this stuff when everyone is basically selling 
                      themselves as an idealized superman and I just want girls to know who I am 
                      and they can take or leave it. 
                    </p>
                    <hr/>
                    <p>
                      <strong>What i am doing with my 
                        life</strong><br/>
                      it's just awful to write this stuff and i 
                      hate having to sell myself or make myself seem like some amazing superhuman. 
                      i have some generic interests, im a bit shy, and i dont play games and just 
                      want be there for a girl and make her feel like the most unique and special 
                      person, so this is one of the most annoying experiences ever. i dont even 
                      know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.

                      I am really good at ?
                      it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.

                      The first thing you will notice about me?
                      it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.

                      I cant live without ?
                      My Mobile My Car My Dog

                      I am looking for ?
                      someone good with heart
                      Details His/ Her Last Online 1 hour ago Ethinicity White Height 5' 8" Body type Slim Diet Veg Smoke No Drink Occasionally Drugs No Religion Hindu Sign Vergo Education Masters Job Consultant Income 5 figures Language
                      English
                      Spanish
                      Hindi
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui. Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.

                  </div>
                </div>
              </div>

              <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

              </body>
            </html>

Here's a quick pen