Aligning two columns Twitter Bootstrap 3

Question

Using Twitter Bootstrap 3, I have two colummns, one with an image and the other has text. I'm trying to place the two side by side for desktop view, but then for smaller screens (mobile,tablet) the text has to fall beneath the image. I have tried various float and positions css but unsuccessful.

Code:

                        <div class="row">
                            <h2>History</h2>
                                <div class="col-md-6">
                                    <img class="img-rounded" src="img/fldry-ban.png"/>
                                        </div>
                        <div class="col-md-6">
                            <p> text  </p>
                                </div>
                                    </div>
                                        </div>

If anyone has the time to provide some details of what CSS i should be using, I would be greatly appreciated. :-)

Eaxmple of layout require

possible duplicate of [How do I change Bootstrap 3 column order on mobile layout?](http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout) — BENARD Patrick, Jul 07 '15 at 14:25

greenhoorn · Answer 1 · 2015-07-07T13:08:04.500

4

By now you're just telling the browser: "Hey, if I am on a medium screen device (col-md-6) let's take 6 out of 12 blocks for displaying!"

You need to add the class for the mobile view too:

<div class="col-md-6 col-sm-12">

So now, the mobile browser also knows, that he should use the full 12 blocks to display.

For further information about how to use the grid system of bootstrap take a look at this.

edited Jul 07 '15 at 13:08

answered Jul 07 '15 at 13:01

greenhoorn

1,601
2
15
39

this is the response. For clarify, you are using 6 blocks of the grid for medium screen devices and all (12) for small devices. – RokumDev Jul 07 '15 at 13:05

Ravi Chauhan · Answer 2 · 2015-07-07T13:10:21.223

-3

try this

 <img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>


//or might be possible


<style>
  .custom > img{
    width:100%;
  }
</style>
<div class="row">
   <h2>History</h2>
         <div class="col-md-6 col-sm-6 col-lg-6 custom">
               <img class="img-rounded" src="img/fldry-ban.png"/>
         </div>
         <div class="col-md-6 col-sm-6 col-lg-6">
                 <p> text  </p>
         </div>
 </div>

edited Jul 07 '15 at 13:10

answered Jul 07 '15 at 13:07

Ravi Chauhan

1,409
13
26

2

This does not correspond to the question at all. The question is about aligning columns in bootstrap, not about placing a 100% width image. – RodrigoDela Jul 07 '15 at 13:08

Aligning two columns Twitter Bootstrap 3

2 Answers2