T.Doe T.Doe - 3 years ago 122
CSS Question

Four column layout bootstrap

I got give a jsfiddle that asked the following:

Four Column Layout: Using a Bootstrap class, edit these divs from stacked to a 4 column layout

HTML:

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="c"></div>
<div class="a"></div>
<div class="d"></div>
<div class="b"></div>


CSS:

div{
height: 50px;
min-width: 50px;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}


For my answer I did the following:

HTML:

<div class="row-fluid">
<div class="span 3">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="span 3">
<div class="c"></div>
<div class="d"></div>
</div>
<div class="span 3">
<div class="c"></div>
<div class="a"></div>
</div>
<div class="span 3">
<div class="d"></div>
<div class="b"></div>
</div>


CSS:

div{
height: 50px;
min-width: 50px;
display: inline-block;
}
div.a{
background: #00FF00;
}
div.b{
background: #1234FF;
}
div.c{
background: #FbbF00;
}
div.d{
background: #FF3344;
}


But I was told I was wrong with no explanation. Does anyone know how to achieve four stacked columns using bootstrap for the above code?

Answer Source

Here you go with the solution https://jsfiddle.net/yczxm9px/1/

.div{
    height: 50px;
  }
  div.a{
    background: #00FF00;
  }
  div.b{
    background: #1234FF;
  }
  div.c{
    background: #FbbF00;
  }
  div.d{
    background: #FF3344;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div a">
    
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div b">
    
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div c">
    
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div d">
    
    </div>
  </div>
</div>

All the class are bootstrap class.

  • xs for Extra Small Screen
  • sm for Small Screen
  • md for Medium Screen
  • lg for Large Screen.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download