I Used Php include to include the info inside of the modals for the albums and for some reason its including the correct file but its not hidden as i specified in the div class where I have included it. you can visit the music page on https://www.trillumonopoly.com but here is the code for the music page where i included the musicmodals.php info page. Funny thing is it doesnt display all of the content. just the very last div. why is this even visible? How can I fix? I cant include the code of the music modal page ... too much for the text area... but
<html>
<head>
<style>
.general {
background : url("img/parallaxmain1.jpg") repeat fixed 100% !Important;
background-size: cover;
}
.album {
width: 90%;
height: 650px;
margin:0 auto;
overflow-x: auto;
overflow-y: hidden;
background : url("img/featured.jpg") repeat fixed 80% !Important;
background-size: cover;
}
.songlist {
width: 85%;
margin: 0 auto;
font-size: 90% !important;
height: 200px:
overflow-x: auto;
overflow-y: hidden;
}
.albumback {
background : url("img/featured.jpg") repeat fixed 80% !Important;
background-size: cover;
}
</style>
</head>
<body><center><font size="2em">
<div class="general">
<div class="header">
<div class="col-6 ">
<img src="img/mediahead.png" class="img-fluid">
</div>
<div class="col-6 ">
</div>
</div>
<div class="discography row container">
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#BlueLines" data-lity>
<img src="music/011BlueLines/bluelines.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: BLUE LINES & BIG FACES<br>
Release: 2015<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#YungNGettinIt" data-lity>
<img src="music/010YungNGettinIt/yung.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: Yung N Gettin It<br>
Release: 2014<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#RNL" data-lity>
<img src="music/009RNL/rnl.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: RNL<br>
Release: 2014<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#GodsHand" data-lity>
<img src="music/008GodsHand/godshand.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: GodsHand<br>
Release: 2013<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#AG" data-lity>
<img src="music/007IAmAG/IamAGFront.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: ZAREYAH <br>
Title: I AM A G<br>
Release: 2011<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#KeepItG" data-lity>
<img src="music/006KeepItG/keepItGFront.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: Keep It G<br>
Release: 2012<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#Gunsmoke" data-lity>
<img src="music/005GunsmokeNResin/gunsmoke.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: GunsSMoke & Resin<br>
Release: 2011<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#Divine1" data-lity>
<img src="music/004DGvol1/DGvol1front.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: Divine Grind <br>
Title: Vol. 1<br>
Release: 2010<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#PotentAlbum" data-lity>
<img src="music/003PotentAlbum/potentalbumfront.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: The Potent Album<br>
Release: 2006<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#2Potent" data-lity>
<img src="music/002The2PotentAlbum/toopotentalbumfront.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: 2 Potent Album<br>
Release: 2005<br>
</div><br>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 box2"><br>
<a href="#DoinNumbers" data-lity>
<img src="music/001DoinNumbers/DoinNumbersFront.jpg" class="img-fluid">
</a>
<hr style="background-color:#ffffff"><br>
<div class="video description">
Artist: T. Cartel <br>
Title: Doin Numbers<br>
Release: 2005<br>
</div><br>
</div>
</div>
</div>
<center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7512006871298343"
data-ad-slot="7265345115"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!--footer-->
© ILLUMONOPOLY LLC. ALL RIGHTS RESERVED. </center>
<div class="d-none invisible">
<?php include("/customers/b/b/3/trillumonopoly.com/httpd.www/pages/musicmodals.php");?>
</div>
</body>
</html>
An extra closing was before the last modal allowing it to close the last div that contained all the modals. Simply removed the closing and all the content became hidden.
Related
This is my coding line. the
<?php include '../includes/amazon-cart.php' ?>
is not responsive.
<section class="bg-secondary py-4">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img src="https://cdn.truegcloud.com/cholibrium/oto1/cholibrium-up3ds-3-bottles.png" alt="" class="img-fluid d-block mx-auto pb-4 pb-md-0" type="image">
</div>
<div class="col-lg-7">
<h2 class="text-blue text-center">
<b>New Customers Only
<br class="d-none d-md-block">- Price Per Bottle:
<span style="opacity:25%; font-weight: 600;">
<br class="d-none d-lg-block">
<s>$99</s>
</span> $27
</b>
</h2>
<h3 class="text-success text-center" style="font-size:35px;">
<b><u>Savings: $216</u></b>
</h3>
<?php include '../includes/amazon-cart.php' ?>
<form id="buy-form" action="/go/order.php" method="get">
<input type="hidden" name="pid" value="<?php echo ${$funnel.'_SKU'}; ?>">
<button type="submit"
name="submit-test"
value="1"
class="submit-order-btn btn-lg btn-yellow1 p-4 p-relative"
alt="Submit Form"
>
<h3 class="submit-texts m-0"><b>ADD TO ORDER</b></h3>
<div class="loader-wrap">
<span class="loader" style="top: 20%; left: 40%;"></span>
</div>
</button>
<?php if(!isset($_COOKIE['pp_preference']) && isset($_COOKIE['vault'])){ ?>
<p class="text-pink text-center" style="margin-top: 15px !important;text-transform: none;font-weight: 300;font-size: 15px !important;">By clicking "Add To Order" button, your card will automatically be charged.</p>
<?php } ?>
</form>
<div class="row align-items-center justify-content-around">
<div class="col-6">
<img src="https://cdn.truegcloud.com/epishieldplus/up1dssl-4b.png" alt="" class="img-fluid align-self-center d-block mx-auto" type="image">
</div>
<div class="col-6">
<img src="https://cdn.truegcloud.com/epishieldplus/up1dssl-2b.png" alt="" class="img-fluid align-self-center d-block mx-auto" type="image">
</div>
</div>
</div>
</div>
</div>
</section>
but now it became like this
It supposed to be like this
I use PHP code to insert some elements in another PHP file, when the elements were originally created inside the calling PHP file style worked just fine, but when i replaced the code with an 'include(somephpfile.php)', elements were added the way i wanted them to but style didnt apply.
style doesn't apply to elements created this way:
echo '<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms" style="box-shadow: 0px 10px 12px grey; width:80%">
<div class="img-wrapper">
<img src="booksCovers/';
$queryImage = "SELECT cover from books where bookno = '$temp';";
$resultsImage = mysqli_query($db, $queryImage);
$imagesrc = mysqli_fetch_array($resultsImage);
echo $imagesrc[0];
echo '" class="img-responsive" alt="this is a title" style="width : 450px ; height :320px; " />
<div class="mybooks-overlay">
<div class="desc">
<div class="description">';
$query2 = "SELECT description FROM books WHERE bookno = '$temp';";
$results = mysqli_query($db, $query2);
$book = mysqli_fetch_array($results);
echo $book[0];
echo '
</div>
<a class="details" target="_blank " href=" #">Learn More</a>
</div>
</div>
</div>
<figcaption>
<button class="myButtone">
<div class="insider"> </div>
20. 00$
</button>
<div class="heart"></div>
</figcaption>
</div>
</div>';
but it applied when it was done this way:
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms" style="box-shadow: 0px 10px 12px grey; width:80%">
<div class="img-wrapper">
<img src="booksCovers/" class="img-responsive" alt="this is a title" style="width : 450px ; height :320px; " />
<div class="mybooks-overlay">
<div class="desc">
<div class="description">
</div>
</div>
</div>
</div>
<figcaption>
<button class="myButtone">
<div class="insider"> </div>
20. 00$
</button>
<div class="heart"></div>
</figcaption>
</div>
</div>
Home.php(file in controller)
<?php
class Home extends CI_Controller {
public function index() {
$this->load->helper('url');
//display home page
$this->load->view('home.html');
}
}
?>
home.html(file in view page)
<!DOCTYPE html>
<html lang="en">
<head>
<title>PortFolio Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
body, html {
height: 100%;
margin: 0;
}
/* First Container */
.bg {
/* The image used */
background-image: url("1.jpg");
/* Full height */
height: 60%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media (max-width: 800px) {
.bg {
height:80%;
}
}
/* Second container */
.bg1 {
background-color: #f77a55;
height:45%;
}
#media (max-width: 800px) {
.bg1 {
height:70%;
}
}
/* Third container */
.bg2 {
height:40%;
}
#media (max-width: 800px) {
.bg2 {
height:100%;
}
}
/* Fourth container */
.bg3 {
background-color: #404040;
height:60%;
}
#media (max-width: 800px) {
.bg3 {
height:190%;
}
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #404040;
padding: 25px;
}
</style>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Full-stack Developer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!--li class="active">Home</li-->
<li>About Me</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!--First Container-->
<div class="bg">
<div class="container text-center">
<br><br><br><br><br><br>
<h1 style="color:White"><strong>Ready For? Engaging Website||</strong></h1>
<h2 style="color:White">Inventive Web design, Development & Android Application!</h2>
</div>
</div>
<!--Second Container-->
<div id="AboutMe" class="bg1">
<div class="container text-center">
<br><br><br>
<h1 style="color:White"><strong>About Me</strong></h1>
<br>
<p style="color:White; font-size: 15px"><b>I'm a Full stack developer providing complete Web solutions to the clients. I have a deep technical knowledge combined with the broad digital media work, website designing and development experience means I can provide you with honest suggestions on what can be delivered with your available resource. My aim is to out perform expectations at every possible chance.</b></p>
</div>
</div>
<!--Third Container-->
<div id="Services" class="bg2">
<div class="container text-center">
<br><br><br>
<h1 style="color:#f77a55"><strong>Services</strong></h1>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-desktop text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Responsive Web App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-tablet text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Mobile App Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-television text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">UI/UX Development</h4>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<i class="fa fa-4x fa-cloud text-primary mb-3 sr-icons"></i>
<h4 class="mb-3">Hosting & Support service</h4>
</div>
</div>
</div>
</div><br><br><br>
<!--Fourth Container-->
<div id="Portfolio" class="bg3">
<div class="container text-center">
<br><br>
<h1 style="color:#f77a55"><strong>Portfolio</strong></h1>
</div><br><br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Blue Star Power</h4>
<p style="color:white">Blue Star Power Solutions Private Limited are specialists in Diesel Generator Sales and Service, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="6.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Cavotec Inspired Engineering</h4>
<p style="color:white">Global-Airport Solutions is the global industry’s number one meeting place for Airport Operators/Owners,Managers.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="10.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Gemalto Security Free</h4>
<p style="color:white">You will find our identity authentication and data protection technologies at the heart of modern life, Annual Maintenance.</p>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 col-sm-12 text-center">
<img src="11.jpg" class="img-responsive img-rounded" alt="image" >
<h4 class="mb-3" style="color:orange">Singularity University</h4>
<p style="color:white">Our programs and events equip you with the mindset, tools, and resources to successfully journey to the future. </p>
</div>
</div>
</div>
</div><br><br><br>
<!--fiveth container-->
<div id="Contact" class="container">
<h2 class="container text-center" style="color:orange"><b>Let's Get In Touch!</b></h2>
<p class="container text-center" style="color:orange"><span style="font-size: 18px;">Submit the form and we will get back to you as soon as possible!</span></p><br><br>
<form class="form-horizontal" action="">
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Contact Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact_number" placeholder="Enter Contact Number" name="contact_number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="color:red">Subject:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" id="subject" placeholder="Enter Reason For Contacting..." name="subject"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div><br>
<!--Footer-->
<footer class="container-fluid text-center">
<h4 style="color:white">2018 # Full-Stack Developer</h4>
<p style="color:white">All Rights Reserved</p>
</footer>
</body>
</html>
I have done a simple design with bootstrap, which is working fine in local host but when i try to enter it in my codeignitor folder its not working, i mean to say the images
which are their in the page are not getting displayed when i tried it to open via codeignitor, i have saved all my images in view folder itself, i know this is really
a stupid question.
i tried with this but its not working
<img src="<?php echo base_url('image/5.jpg'); ?>" class="img-responsive img-rounded" alt="image" >
you can't use .html file, because in html file you can't write php code.
helper 'url' must be loaded in autoload.php, either in view page you have to load again helper url.
You should not store images in view folder.
You should check some following step-
1) first fix your project base_url which is set in application/config/config.php
2) create a folder(e.g: image) on application location for save all images. then you can
save any img(e.g:5.jpg) in this folder which you are want.
3) on final step where you want to display image use code like this-
<img src="<?php echo base_url();?>/image/5.jpg">
If your images are in public/images directory and your
Base URL is
(you can check/set your base URL in /application/config/config.php
$config['base_url'] = 'enter your base path here';
)
if your basepath is
www.yoururl.com/
then use path
<img src="<?php echo base_url();?>public/image/5.jpg">
I want to show the number of players in the server instead of that UNKNOWN thing, I haven't enabled the API yet, can I get help that, I want to integrate the progress bar to the total players in game like
if players are 50/100
= 50% of the bar will be filled.
Like the bar should work as the api updates.
<div class="is-clearfix"></div>
<section class="section dark-grey has-text-centered">
<div class="container">
<div class="heading">
<h1 class="title">Our Servers</h1>
<br>
</div>
<div class="columns is-gapless">
<div class="column">
<div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png">
</figure></div> <div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div>
<div class="players is-marginless">
<div class="content playersOnline">
Unknown PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress>
<br></div> <a class="button is-info is-medium is-fullwidth">Play Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Just use the SACNR monitor API, and
<div class="columns is-gapless">
<div class="column"><div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png"></figure></div>
<div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div> Hostname:
<div class="hosting"></div>Gamemode:
<div class="game-mode"></div>Map:
<div class="language"></div> Players:
<div class="players is-marginless"><div class="content playersOnline">
FETCHING PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress><br></div>
<a class="button is-info is-medium is-fullwidth">Play Now</a></div></div></div></div></div></section></div>
Where We fetch from API the following things
<?php
require_once("sampsvr.php");
$monitor = new SACNR\Monitor;
//$obj = $monitor->get_info_by_id(1790345);
$obj = $monitor->get_info_by_ip('87.98.241.207','7775');
$players = $obj->Players;
$hostName = $obj->Hostname;
$Gamemode = $obj->Gamemode;
$Mapname = $obj ->Language;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.progress').val(<?php echo $players;?>);
$('.playersOnline').html(<?php echo $players;?> +' PLAYERS ONLINE' );
$('.hosting').html("<?php echo $hostName;?>");
$('.game-mode').html("<?php echo $Gamemode;?>");
$('.language').html("<?php echo $Mapname;?>");
});
</script>
You may find the API at http://monitor.sacnr.com/api.html
I need to remove space between some div and div below that div. Space created if some div is higer then other in column.
Here is example:
http://www.bootply.com/Hc2aO5o4bG
basicly I need to remove space between 1. and 4. post and 2. and 5. and for each other posts that have space below them.
Also post should be in this order:
1. 2. 3.
4. 5. 6.
7. .....
Here is what I trying to accomplish:
Give a clear before 4:
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 cssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssolumns: iq_id, iq_pit
anje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
<div class="col-xs-12 col-md-4 hover">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="content">
<h4>IQ test [PHP & MySQL]</h4>
<p>
</p><p>We have 4 columns: iq_id, iq_pitanje, iq_odgovor and iq_tacan. iq_tacan contains true answer.</p> <a class="post-edit-link" href="http://tuts.masterize.me/wp-admin/post.php?post=1284&action=edit">Edit This</a> <p></p>
</div>
<a href="http://tuts.masterize.me/2014/06/24/iq-test-php-mysql/">
<div class="link">
<i class="fa fa-link"></i>
</div>
</a>
</div>
And give this CSS
.clear {
clear: both;
}
Technically, you must give the .clear every three rows, in your case!
Preview: http://www.bootply.com/uC3qzah3f9
For a dynamic solution:
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
.posts {overflow: hidden;}
.posts .post {border: 1px solid #999; padding: 10px; text-align: center; width: 32%; margin: 0.5%; float: left;}
.posts .post:nth-child(3n+4):before {clear: both; display: block; content: " ";}
<div class="posts">
<div class="post">Post #1</div>
<div class="post">Post #2</div>
<div class="post">Post #3</div>
<div class="post">Post #4</div>
<div class="post">Post #5</div>
<div class="post">Post #6</div>
<div class="post">Post #7</div>
<div class="post">Post #8</div>
<div class="post">Post #9</div>
<div class="post">Post #10</div>
<div class="post">Post #11</div>
<div class="post">Post #12</div>
<div class="post">Post #13</div>
<div class="post">Post #14</div>
<div class="post">Post #15</div>
</div>
In the above case, you need to manually change the CSS: (3n + 4). I gave + 4 to not include the 1st child.
You should be wrapping your rows with <div class="row"></div>: http://getbootstrap.com/css/#grid
You can also set a min-height property to something like 141px so that the borders line up.