I am pretty new to Django and I encountered a problem with the media-grid

Question

0

Asked: June 15, 20262026-06-15T09:18:03+00:00 2026-06-15T09:18:03+00:00

I am pretty new to Django and I encountered a problem with the media-grid

0

I am pretty new to Django and I encountered a problem with the media-grid class of Twitter Bootstrap: instead of displaying a gallery, I am only able to make normal lists of images.

I am using Bootstrap 2.2.1 with Django 1.4.1 on Windows XP. I copied the Bootstrap files in my project folder and I made a very simple HTML template to test Bootstrap’s media-grid class. My goal is to visualize a simple gallery of images from my database.

The correct syntax for the media-grid class is defined here as:

<ul class="media-grid">
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
</ul>

However, if I copy and paste the same exact code in a simple HTML template, and load it via the render_to_response command in my views.py file, the resulting displayed page only contains a normal list of images, one per line, with a normal dot (as in every standard list) before every image. I am able to use Bootstrap’s classes with Django in the same project, and this makes me exclude I am not importing the css file correctly.

I have the feeling Django interprets the page without minding media-grid‘s syntax, and renders a list of images.

The simple HTML file I’m using is the following:

<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}To be defined{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

<!-- Le styles -->
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<style>
  body {
      padding-top: 80px;        
      padding-bottom: 40px;     
  }
</style>
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 <script src="{{STATIC_URL}}js/jquery-1.8.1.min.js" type="text/javascript"></script>
   {% block extrahead %}
   {% endblock %}
 <script type="text/javascript">
   $(function(){
   {% block jquery %}
   {% endblock %}
   });
 </script>
</head>

<body>

  <ul class="media-grid">
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/330x230" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/330x230" alt="">
      </a>
    </li>
  </ul>


</body>
</html>

I have tried to write it down differently, and unsuccessfully looked online for a solution for 2 days. If you have an idea of why this code may not be working, please let me know.

Thanks everyone in advance.