How to show more columns based on window resolution? - css

Question

I have a row that contains two columns, I would like to show a third column only if the window is resized to a specific resolution, eg: 1920x720. How can I do this using bootstrap?
Current HTML:
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
Note that if the resolution is lower than 1920x720 then bootatrap must show only two columns, otherwise the columns in the row must be three.
Is possible achieve this only using bootstrap?

Answer 1

Compass approach
There are options to control the width breakpoints. This can be found in the _variables.scss file:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1920px // add custom breakpoint
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1880px // add custom breakpoint
) !default;
With this in place you can control the structure to be responsive on the xxl breakpoint.
<div class="row">
<div class="col-6 col-xxl-4">...</div>
<div class="col-6 col-xxl-4">...</div>
<div class="col-4 d-none d-xxl-block">...</div>
</div>
CSS Approach
Since we cannot control the device height in a media query out-of-box in Bootstrap it might be easier to override in CSS and use auto-layout columns.
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col d-none" rel="xxl">...</div>
</div>
#media (min-width: 1920px) and (min-height: 720px){
.col[rel="xxl"] {
display: block !important;
}
}
DEMO FIDDLE
DEMO RESULT

Answer 2

You can use the built-in class to hide/show a col according to the break point :
example :
.d-sm-none {background:lightgreen;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-sm-6">run me in full page to see the third column</div>
<div class="col-md-4 col-sm-6">2</div>
<div class="d-sm-none d-md-block col">3</div>
</div>
you will find the class to use to select your breakpoints at https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements
avalaible class below, if the widest breakpoint do not match your needs, recreate a similar rule for it . Another answer gives you the clues for that.
table td {
border: solid 1px;
}
table {border-collapse:collapse;}
>
<p>To show an element only on a given interval of screen sizes you can combine one <code class="highlighter-rouge">.d-*-none</code> class with a <code class="highlighter-rouge">.d-*-*</code> class, for example <code class="highlighter-rouge">.d-none .d-md-block .d-xl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
<table>
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-lg-none"</span><span class="nt">></span>hide on screens wider than lg<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block"</span><span class="nt">></span>hide on screens smaller than lg<span class="nt"></div></span></code></pre>
</figure>

Answer 3

you can't do that with bootstrap classes you need to add custom media queries for the same. in that case you dont have to use row>col-6 classes
<div class="wrapper">
<div class="first">...</div>
<div class="second">...</div>
<div class="third">...</div>
.first,.second,.third{
width:33.33%
}
#media(max-height:720px){
.third{
display:none
}
.first,.second{
width:50%
}
}

Answer 4

You can use the hidden class as mention here
For example on small device you can hide the column by adding this class: hidden-sm-down
Check the table there.
Update:
for bootstrap ver > 4 you should use like #G-Cyr said
with the class .d-sm-none
You can read the doc here