Bootstrap grid divs next to each other

In a webshop, i am listing out products into col-md-3 class divs.
With this, in mobile view, the divs are under each other.

What i want, that when i am viewing on mobile device, i want 2 divs next to each other.

How can i do that? Use not just the col-md-3 class, and add a col-xs-6 class to the divs?

<div class="col-md-3 col-xs-6"> <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span> <a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_img_to_link"> <img src="https://domain.hu/images/item/th-8888-28950.jpg" alt="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="img-responsive"> </a> <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP alaplap</a></h2> <span class="main_item_cikkszam">Cikkszám: 997872</span> <span class="main_item_kiszereles">Kiszerelés: Darab</span> <span class="main_item_kiszereles"><b>Készleten</b></span> <input type="hidden" value="1" id="MinimumOrder186"><span class="main_item_price_2">101.290 Ft,-</span> <span class="main_item_price_3">Akciós ár: 97.290 Ft,-</span><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" class="kiemeltek_to_link" title="Termék adatlap">Termék adatlap <i class="fa fa-info-circle" aria-hidden="true"></i></a> </div>

3 Answers
3

The example below will list 2 divs next to each other from extra small and up:

Just having col grid class will stack the div's horizontally in all viewports. Bootstrap will automatically take care of partitioning the width equally. Take a look at bootstrap documentation on grid system for more info.

col

Bootstrap

<div class="container"> <div class="row"> <div class="col">  <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span> <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP alaplap</a></h2> <span class="main_item_cikkszam">Cikkszám: 997872</span> <span class="main_item_kiszereles">Kiszerelés: Darab</span> <span class="main_item_kiszereles"><b>Készleten</b></span> </div> <div class="col">  <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span> <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP alaplap</a></h2> <span class="main_item_cikkszam">Cikkszám: 997872</span> <span class="main_item_kiszereles">Kiszerelés: Darab</span> <span class="main_item_kiszereles"><b>Készleten</b></span> </div> </div> </div>

I've created a pen as well with the above code, play around and check out the output.

True, most of the bootstrap templates col- classes are used in a mixing way. So just add the col-xs-6 for the first div, col-xs-6 for the 2nd div (remember they should have a div class="row" wrap outside so that the col class may understand and divide ) , as a result, in mobile mode they'll stand next to each other. Hope this help (This code is only works if you're using Bootstrap v3.3.7, in Bootstrap 4 some col-classes are changed) :

<div class="container"> <div class="row">    <div class="col-md-3 col-xs-6 col-lg-3 col-sm-6"> ... // THE CONTENT HERE </div>  <div class="col-md-3 col-xs-6 col-lg-3 col-sm-6"> </div>  </div> </div>

Note that a row contain the div is equal 12 columns, so when you use mixing like this :

col-md-3 = 3/12 = 1/4 ( in larger desktop mode ) col-xs-6 = 6/12 = 1/2 in mobile mode col-lg-3 = 3/12 = 1/4 ( in desktop mode ) col-sm-6 = 6/12 = 1/2 in tablet mode

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

搜尋此網誌

Dfyjkt