CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3gridrendering
user1271930
user1271930

Reputation: 341

Why following Bootstrap columns fail when using img inside a column?

Following markup fails to render correctly when using img tag inside a grid column:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>

It will work perfectly if I remove the image and replace it with text.

Upvotes: 0

Views: 29

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

You're not nesting your columns properly. There can only be 12 columns per row and you're trying to fit 4 rows worth into one.

You should look at the documentation a little closer.

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>
<div class="row">
  <div class="col-sm-4"><img class="img-responsive" src="https://placeholdit.co//i/48x72?text=USER\nERROR" /></div>
  <div class="col-sm-8">Description</div>
</div>

Upvotes: 1

Related Questions