Member Avatar for davy_yg

Hello,

I am trying to use bootstrap to put my blogging in order. I expect that it would create 3 blogs in a row then moves to the next row for another blog.

Check this out:
http://www.innovation.web.id/One/One/blog2.php

I thought I already coded correctly. Yet, in fact it still appears one blog for each row:

blog2.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
<!--
<link  href="css/bootstrap.min.css"  rel="stylesheet"> 
<link  href="css/bootstrap-responsive.css"  rel="stylesheet"> 
-->

</head>

<body>

<?php include('nav.php'); ?>


<br><br><br>
<center><h1><b>Our Blog</b></h1></center>


<br><br><br><center>

<div class="container-fluid">

<div class="row">
<div class="span4"><p>Ini kolom ke 1, Class span4.</p></div>
<div class="span4"><p>Ini kolom ke 1, Class span4.</p></div>
<div class="span4"><p>Ini kolom ke 1, Class span4.</p></div>
</div>

<div class="row">
<div class="span4">

<!--<div style="padding: 20px; background: white;">
<div style="width:300px; height: 400px; background:grey; z-index: -1; text-align: left; padding: 20px;">--><br><img src="Images/Blog2/blog1.jpg">

<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <!--<div id="readlink"><a href="blog2-article.php">Read More .. </a></div>--> 

<!--</div>
<!--</div>-->
</div>

<div class="span4">
<!--<div style="padding: 20px; background: white;">-->
<!--<div style="width:300px; height: 400px; background:grey; z-index: -1; text-align: left; padding: 20px;">--><br><img src="Images/Blog2/blog2.png">

<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <!--<div id="readlink"><a href="blog2-article2.php">Read More .. </a></div> 

</div>
<!--</div>-->
</div>

<div class="span4">
<!--<div style="padding: 20px; background: white;">
<div style="width:300px; height: 400px; background:grey; z-index: -1; text-align: left; padding: 20px;">--><br><img src="Images/Blog2/blog3.png">

<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <!--<div id="readlink"><a href="blog2-article3.php">Read More .. </a></div>-->
<!--
</div>
</div> -->
</div>
</div>

</div>

<div class="row">
<div class="span4">
<div style="padding: 20px; background: white;">
<div style="width:300px; height: 400px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog2/blog4.png">

<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <div id="readlink"><a href="blog2-article4.php">Read More .. </a></div> 

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

<div class="span4">
<div style="padding: 20px; background: white;">
<div style="width:300px; height: 400px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog2/blog5.png">

<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <div id="readlink"><a href="blog2-article5.php">Read More .. </a></div> 

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

<div class="span4">
<div style="padding: 20px; background: white;">
<div style="width:300px; height: 400px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog2/blog4.png">

<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  <div id="readlink"><a href="blog2-article.php">Read More .. </a></div>

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

</div>
</center>

<br><br><br><br>

<center>

<div style="font-family: Arial;">
<h1><b>Please Subscribe our newsletter</b></h1><br>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<br><br>


<input type="text" name="email"><input id="submitbutton" type="submit" value="Email">
</center>

<br><br>
<center>
<img src="Images/Blog/twitter.jpg"><br>
<img src="Images/Blog/cusor.jpg">
</center>
<br><br><br><br>

<center>
<div style="font-family: Arial;">
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</div>
</center>



<?php include('footer.php'); ?>



</body>
</html>

Can you help me fix the code?

  • 2 Contributors
  • 4 Replies
  • 232 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for pritaeas

You can try col-md-4 instead of span4.

IIRC spanX classes are deprecated as of version 3.

Edited by pritaeas
Member Avatar for davy_yg

Hello, there are things that still confusing to me such as :

Grid Classes

The Bootstrap grid system has four classes:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

okay, if for phones and for desktop and the rest are different then I should build 4 types of bootstrap to make it works in all devices - is that true?

Member Avatar for davy_yg

Your idea seems good that now my bootstrap works in desktop yet it still does not work in cell phone. Evenif I already use xs (for phones)

I wonder why?

It looks like that it works with previous version of bootstrap which uses span4 instead of col-xs-4

Is there anything to do with my cellphone browser?

I am using Google Crome to browse in my cell phone but I do not know how to cek the version.

Member Avatar for pritaeas

If you don't show what you have (preferably an URL), then nobody can help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.