CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Ankur Sinha
Ankur Sinha

Reputation: 6639

Custom placing of elements in Bootstrap on resizing screen

Currently, my layout in bootstrap is as follows. This is applicable when the window is maximized. 

col-md-3 | col-md-3 | col-md-3 | col-md-3 |
col-md-3 | col-md-3 |      col-md-6       |

However, when I try to resize it to half the screen, somewhere close to the dimensions of a tab or a smartphone, it becomes:

col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-6

Now what I am trying to achieve when the screen is minimized to a dimension to that of a tab is:

col-md-3 | col-md-3 |
col-md-3 | col-md-3 |
col-md-3 | col-md-3 |
      col-md-6      |

And I want the elements to be stacked one below the other when it is minimized to a dimension to that of a smartphone, like it is happening currently.

I have looked up to some sample codes online but it did not help me. Can someone give me some inputs on how to go about with this?

This is my current code:

<div class="col-md-12" id="awards-logo">
  <div class="row">
    <div class="col-md-3" id="logo-one"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-two"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-three"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-four"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
  </div>
  <div class="row">
    <div class="col-md-3" id="logo-five"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-six"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
    <div class="col-md-6" id="logo-seven"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
  </div>
</div>

Upvotes: 0

Views: 52

Answers (3)

Sandra Delovska
Sandra Delovska

Reputation: 26

Try adding the col-xs-* class, so you can control grid behavior on smartphones. What I think you want to achieve is this:

  <div class="col-md-12 col-xs-12" id="awards-logo">
      <div class="row">
        <div class="col-md-3 col-xs-6" id="logo-one"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-two"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-three"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-four"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
      </div>
      <div class="row">
        <div class="col-md-3 col-xs-6" id="logo-five"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-six"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
        <div class="col-md-6 col-xs-12" id="logo-seven"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
      </div>
    </div>

For more info, look here in "Mixed: mobile and desktop" section.

Upvotes: 1

AVAVT
AVAVT

Reputation: 7133

Change col-md-3 to col-md-3 col-xs-6, and col-md-6 to col-md-6 col-xs-12.

Demo: http://jsfiddle.net/0z3nso2k/2/

Upvotes: 0

flemcito
flemcito

Reputation: 92

The way Bootstrap deals with responsive layouts, is adding different classes to the elements that are targeted at different breakpoints. So, to achieve the behaviour you describe, you need a construct like this:

<div class="col-md-3 col-sm-6"></div>

This means that this column will take up 1/4 of the screen on medium screens (I dont't recall the exact pixel threshold Bootstrap is using), and on small screens it will take up 1/2 the space.

Upvotes: 0

Related Questions