D. Doke
Reputation: 3
HTML code I am using will not display properly?
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>
Upvotes: 1
Views: 77
Answers (1)
Adam Hari
Reputation: 145
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
Upvotes: 1