Mikkel Mikkel - 3 months ago 9
CSS Question

Add row only on small device - bootstrap

I have a menu in two sections. 3 li elements in the top, and 2 in the bottom, separated with a row.

But when I view it from a small device i would like to align all li element to be in a row so they are separated.

Is there a way to use bootstrap to make a row active only on small devices? I tried using visible-xs but that hides the menu on the big device.

<div class="row">
<div class="col-md-12 nav1">

<nav>
<ul>
<div class="col-md-2 col-md-offset-3">
<li><a cla target="_blank" href="#"><center><b>Toyota</b></center></a> </li>
</div>
<div class="col-md-2">
<li><a target="_blank" href="#"><center><b>Hyndai </b></center></a> </li>
</div>
<div class="col-md-2">
<li><a target="_blank" href="#"><center><b>Nissan</b></center></a> </li>
</div>
</ul>
</nav>

</div>
</div><!-- row -->


<div class="row">
<div class="col-md-12 nav2">
<nav>
<ul>
<div class="col-md-2 col-md-offset-4">
<li><a target="_blank" href="#"><center><b>Varebiler</b></center></a> </li>
</div>
<div class="col-md-2">
<li><a target="_blank" href="#"><center><b>Brugte biler</b></center></a> </li>
</div>
</ul>
</nav>
</div>
</div>

Answer

You had the right idea with visible-* class, but you forgot about the opposing hidden-* class, where * can be lg, md, sm or xs. The way you get this layout working is as such:

<div class="container">
  <div class="row visible-lg visible-md hidden-xs hidden-xs">
    <div class="col-lg-4 col-md-4 text-center">
      <a href="#" target="_blank"><strong>Toyota</strong></a>
    </div>
    <div class="col-lg-4 col-md-4 text-center">
      <a href="#" target="_blank"><strong>Hyundai</strong></a>
    </div>
    <div class="col-lg-4 col-md-4 text-center">
      <a href="#" target="_blank"><strong>Nissan</strong></a>
    </div>
  </div>
  <div class="row visible-lg visible-md hidden-xs hidden-xs">
    <div class="col-lg-6 col-md-6 text-center">
      <a href="#" target="_blank"><strong>Varebiler</strong></a>
    </div>
    <div class="col-lg-6 col-md-6 text-center">
      <a href="#" target="_blank"><strong>Brugte Biler</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Toyota</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Hyundai</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Nissan</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Varebiler</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Brugte Biler</strong></a>
    </div>
  </div>
</div>

Notice that his renders a total of 7 .row's inside your container, 2 of which only show when the screen is lg or md, and the other 5 only show when the screen is sm or xs. Check out this Bootply example to see the code in effect:

Bootply

Hope this helps! Also, be cautious using col-*-* on non-div elements, they may not render as intended.