I'm working on a website using bootstrap for my movie collection. I still have a lot to learn and a lot to still due, but I'm having trouble getting data from mysql and putting it into a column view.
This is a sample of what I want the site to look like for the main page.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>MovieDB</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<div class="container">
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">MovieDB</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Random</a></li>
<li><a href="#">Genres</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Advance <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Random</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Movies
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="http://cdn.myanimelist.net/images/anime/11/19998.jpg">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/11/19998.jpg" alt="">
</a>
<h3>
<a href="http://localhost:8888/BootStrap/startbootstrap-3-col-portfolio-1.0.2/009-1">009-1</a>
</h3>
<p>Mylene Hoffman, a beautiful cyborg spy with the codename "009-1" lives in an alternative world where the cold war never ended, continuously on-going for 140 years. The world is split into two factions, the West and the East block. A masquerade of peace between the two is slowly dissipated as the conflict occurs. Through politics, the two factions battle over supremacy over technology to threats of</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/6/50859.jpg" alt="">
</a>
<h3>
<a href="#">The Twelve Kingdoms</a>
</h3>
<p>Nakajima Youko is your average somewhat timid high school student. One day, a strange man named Keiki appears before her, swearing allegiance. Before she could properly register what was happening, demon-like creatures attack Youko and her friends, after which they are pulled into a different world. A world unlike what she has ever known. Separated from Keiki, Youko and her friends must do whateve</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://localhost:8888/New/Images/26940.jpg" alt="">
</a>
<h3>
<a href="#">3x3 Eyes</a>
</h3>
<p>3X3 Eyes is the story of a young man named Yakumo Fuuji, who through a strange series of events becomes the immortal slave of the last of a race of 3 Eyed immortals. The immortal absorbs his soul to save his life, making him immortal in the process. Now, he begins a journey with the female immortal in an attempt to find a way of becoming human. Of course, there are many complications along the way</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/6/2483.jpg" alt="">
</a>
<h3>
<a href="#">5 Centimeters per Second</a>
</h3>
<p>Tohno Takaki and Shinohara Akari, two very close friends and classmates, are torn apart when Akari's family is transferred to another region of Japan due to her family's job. Despite separation, they continue to keep in touch through mail. When Takaki finds out that his family is also moving, he decides to meet with Akari one last time.<br>
As years pass by, they continue down their own paths, their </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/4/11946.jpg" alt="">
</a>
<h3>
<a href="#">8 Man After</a>
</h3>
<p>Private detective Hazama Itsuru is hired by Professor Tani to investigate a cyborg parts theft which eventually leads him to meet Sachiko Yokogawa, the original 8 Man's love interest. Living her new life working for the Biotecho Corp., Sachiko finds herself involved with a new 8 Man, who appears after Hazama is fatally wounded by an unknow cyborg. Amidst a violent urban background with cyber-junki</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/1/2300.jpg" alt="">
</a>
<h3>
<a href="#">Abenobashi Magical Shopping District</a>
</h3>
<p>Childhood friends Arumi and Sasshi are residents of the Abenobashi commercial district in Abeno-ku, Osaka. After an accident, they find themselves transported to an alternate sword and sorcery world. Their attempt to get back to reality finds them traversing a series of nonsensical worlds built on science fiction, war, fantasy, dating sim games and American movies. Each alternate Abenobashi is a s</p>
</div>
</div>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/8/38155.jpg" alt="">
</a>
<h3>
<a href="#">Accel World</a>
</h3>
<p>The year is 2046. Haruyuki Arita is a young boy who finds himself on the lowest social rungs of his school. Ashamed of his miserable life, Haruyuki can only cope by indulging in virtual games. But that all changes when Kuroyukihime, the most popular girl in school, introduces him to a mysterious program called Brain Burst and a virtual reality called the Accel World. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/13/2851.jpg" alt="">
</a>
<h3>
<a href="#">Tsubasa: RESERVoir CHRoNiCLE the Movie - The Princess in the Birdcage Kingdom</a>
</h3>
<p>The year is 2027 in MegaTokyo, six years before the Knight Sabers will make their debut. Boomers (artificial humans) are still a relatively new advancement, and the implementation and integration of boomers into society is still a bit buggy -- sometimes fatally so. Whenever a boomer incident occurs, though, there is the Advanced Police, a special force trained to deal with boomer crimes.
Leon McN</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/2/15440.jpg" alt="">
</a>
<h3>
<a href="#">A.D. Police (TV)</a>
</h3>
<p>Set a few years before Bubblegum Crisis Tokyo 2040, A.D. Police chronicles the tales of Mega-Tokyo's special police division designed to control rogue Boomers in the city. A.D. Police Officer Kenji Sasaki faces a major dilemna: he loses another partner to a rabid boomer. A day after he's sent off-duty, he receives a new partner in the form of German cop Hans Kleif. Funny thing is that Kenji sucker</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/8/38155.jpg" alt="">
</a>
<h3>
<a href="#">Accel World</a>
</h3>
<p>The year is 2046. Haruyuki Arita is a young boy who finds himself on the lowest social rungs of his school. Ashamed of his miserable life, Haruyuki can only cope by indulging in virtual games. But that all changes when Kuroyukihime, the most popular girl in school, introduces him to a mysterious program called Brain Burst and a virtual reality called the Accel World. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/13/2851.jpg" alt="">
</a>
<h3>
<a href="#">Tsubasa: RESERVoir CHRoNiCLE the Movie - The Princess in the Birdcage Kingdom</a>
</h3>
<p>The year is 2027 in MegaTokyo, six years before the Knight Sabers will make their debut. Boomers (artificial humans) are still a relatively new advancement, and the implementation and integration of boomers into society is still a bit buggy -- sometimes fatally so. Whenever a boomer incident occurs, though, there is the Advanced Police, a special force trained to deal with boomer crimes.
Leon McN</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" style="max-height:300px" src="http://cdn.myanimelist.net/images/anime/2/15440.jpg" alt="">
</a>
<h3>
<a href="#">A.D. Police (TV)</a>
</h3>
<p>Set a few years before Bubblegum Crisis Tokyo 2040, A.D. Police chronicles the tales of Mega-Tokyo's special police division designed to control rogue Boomers in the city. A.D. Police Officer Kenji Sasaki faces a major dilemna: he loses another partner to a rabid boomer. A day after he's sent off-duty, he receives a new partner in the form of German cop Hans Kleif. Funny thing is that Kenji sucker</p>
</div>
</div>
<!-- /.row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MovieDB 2015</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is what I have so far, I had it working, but was fiddling with it and didn't save so got to fix it again to get it at least showing something.
<div class="row">
<?php
include 'database.php';
$pdo = Database::connect();
$sql = 'SELECT Code, Title, Alt, Type, Category, LEFT(Plot, 400) AS Plot, Rated, TotalEps, Status, Duration, YearReleased, Score, Image FROM Movies GROUP BY Code ORDER BY Title';
foreach ($pdo->query($sql) as $row) {
echo '<div class="col-md-4 portfolio-item">';
echo '<a href="'.$row->Image .'"><img class="img-responsive" style="max-height:300px" src="'.$row->Image .'" alt=""></a>';
echo '<h3><a href="http://localhost:8888/BootStrap/startbootstrap-3-col-portfolio-1.0.2/'.$row->Code .'">'.$row->Title .'</a></h3>';
echo '<p>'..$row->Plot'</p>';
echo '</div>';
echo '</div>';
}
Database::disconnect();
?>
</div>
