Bootstrap Two Column Layout Misalignment

Issue

I am trying to create a simple two column layout which has one big image followed by two columns, left one for image right one for text.

Misalignment

But I’m not able to align the image column with the top big image.
I can add a class with -15px margin but then there is misalignment in XS screen size.

with -15px margin

I can add another -15px margin for xs screen also then I might have to fix something else. This is such a basic layout issue, I have a feeling I am doing something wrong.

Can you guys suggest what I am doing wrong and how should I approach two column layout in Bootstrap 3?

Here is the Bootply Link

Solution

The <div class="col-sm-12"> in the lower box causes the trouble. You have two options here:

  1. Just delete the div
  2. Add an additional <div class="row"> after the <div class="col-sm-12">

You were essentially creating a nested grid and bootstrap requires you to begin every new nesting level with a new <div class="row">

See: http://www.bootply.com/sh13QtYpFP

Answered By – bspellmeyer

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.