CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
Mostafa Talebi
Mostafa Talebi

Reputation: 9173

A responsive arrangement of columns I need with bootstrap

I have twelve social icons.

I want to be:

12 in row in desktop mode (makes 1 row)

3 for each row in tablet mode (makes 4 rows)

1 for each row for mobile size (makes 12 rows)

I have this markup:

<div class='container'>
   <div class='row'>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>
<div class='col-md-1'></div>

   </div>
</div>

But it soon becomes into twelve rows (in tablet mode).

Thanks

Upvotes: 0

Views: 279

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362290

You can do this..

<div class="container">
   <div class="row">
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
     <div class="col-sm-4 col-md-1">x</div>
   </div>
</div>

http://www.bootply.com/oSLoSE9saE

Notice you don't need the col-xs-12 since Bootstrap will stack by default on the smallest devices (phones)

Upvotes: 2

Nik Terentyev
Nik Terentyev

Reputation: 2310

<div class='container'>
   <div class='row'>

<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>

<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>

<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>
<div class='col-md-1 col-sm-3 col-xs-12'></div>

   </div>
</div>

Upvotes: 1

Quince
Quince

Reputation: 14990

Something like this?

<div class='container'>
    <div class='row'>
        <div class='col-sm-12 col-md-4 col-lg-1'>1</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>2</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>3</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>4</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>5</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>6</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>7</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>8</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>9</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>10</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>11</div>
        <div class='col-sm-12 col-md-4 col-lg-1'>12</div>
    </div>
</div>

http://jsfiddle.net/leighking2/bkxj7772/ (adjust width of preview to see it change)

Upvotes: 2

wiesion
wiesion

Reputation: 2435

use

<div class="col-xs-12 col-sm-4 col-md-1"></div>

for each div

Upvotes: 4

Related Questions