CSS: Image pokes out of Bootstrap panel - html

Question

I have the following:
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{ article.headline }}</h2>
<br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
</div>
<div>
{% if article.image %}
<img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
{% endif %}
{{ article.text|safe }}
</div>
</div>
</div>
</div>
{% endblock %}
And the image currently sticks out the bottom of the panel and makes it looks ever so odd.
The css for article image is simply:
.article-image {padding: 0; margin-bottom: 20px;}
#media(min-width: 768px){.article-image {margin-left: 20px;}}
Can anyone help understand why the image does not fit snugly within the panel?
Many thanks, Alan.

Answer 1

Try to put your panel content inside a div class="panel-body" and give the image dimensions. Something like this
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{ article.headline }}</h2>
<br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
</div>
<div class="panel-body">
{% if article.image %}
<img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
{% endif %}
{{ article.text|safe }}
</div>
<div>
</div>
</div>
</div>
</div>
{% endblock %}
CSS
.article-image {
padding: 0;
margin-bottom: 20px;
width: 50px; //whatever you want
height: 50px; //whatever you want
}
#media(min-width: 768px){
.article-image {
margin-left: 20px;
}
}