CODEWITHSUNDEEP
csshtmltwitter-bootstrapresponsive-design
kofhearts
kofhearts

Reputation: 3774

Number of columns according to screen size?

Please consider the following layout for a page. There are three columns inside a container.

<div class = "container">
  <div class="row">
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
  </div>
</div>

The problem i want to solve is that for mobile screen sizes i want to hide the middle column. For screen sizes greater than mobile i.e tablet, laptops and desktops i want to show the middle column. How can i achieve this. All three columns should be of equal width.

I appreciate any help! Thanks!

Upvotes: 1

Views: 738

Answers (2)

j08691
j08691

Reputation: 207901

Bootstrap includes responsive utility classes to hide or show elements are specific breakpoints. The visible classes are visible-xs-*, visible-sm-*, visible-md-*, and visible-lg-*. The hidden classes are hidden-xs, hidden-sm, hidden-md, and hidden-lg.

If you want to hide an element for small and extra small resolutions, you can do something like <div class="col hidden-xs hidden-sm">

Bootply example

Upvotes: 3

slon
slon

Reputation: 1030

By using css, you can hide anything. See below:

    <div class = "container">
      <div class="row">
        <div class="col">
        </div>
        <div class="col column-to-hide">
        </div>
        <div class="col">
        </div>
      </div>
    </div>


 <style>
    @media screen and (max-width: 500px){ 
        .column-to-hide{
           display:none;
        }
    }
  </style>

Upvotes: 0

Related Questions