I am trying to create a grid to cover the full screen with 3 columns (left, middle, right)
Here is my html markup
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 d-md-none bg-dark text-white">
<h1>LEFT</h1>
<p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
</div>
<div class="col-lg-8 col-md-9 bg-danger text-white">
<h1>MIDDLE</h1>
<p>This column should always show up. it should cover 75% (9/12) of the screen on <= mid-size view. And 66.6% (8/12) on a large views</p>
</div>
<div class="col-lg-2 col-md-3 bg-warning">
<h1>RIGHT</h1>
<p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on <= mid-size view</p>
</div>
</div>
</div>
Here is a codeply with my code https://www.codeply.com/go/LRlYKLav32
The class d-md-none
does not appear to be working correctly. I am expecting the column to be hidden when the view is small but should be visible on larger views.
How can I correct this issue?
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
In Bootstrap 4 there are 2 types of classes: The hidden-*-up which hide the element when the viewport is at the given breakpoint or wider. hidden-*-down which hide the element when the viewport is at the given breakpoint or smaller.
Use the d-inline-block class to make an element display inline block. Use any of the d-*-inline-block classes to control WHEN the element should be inline block on a specific screen width. Resize the browser window to see the effect. Inline block DIV.
As explained in Missing visible-** and hidden-** in Bootstrap v4...
If you want the LEFT on lg and up, it would be: d-none d-lg-block
.
If you want the LEFT on lg only it would be: d-none d-lg-block d-xl-none
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 d-none d-lg-block bg-dark text-white">
<h1>LEFT</h1>
<p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
</div>
<div class="col-lg-8 col-md-9 bg-danger text-white">
<h1>MIDDLE</h1>
<p>This column should always show up. it should cover 75% (9/12) of the screen on <= mid-size view. And 66.6% (8/12) on a large views</p>
</div>
<div class="col-lg-2 col-md-3 bg-warning">
<h1>RIGHT</h1>
<p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on <= mid-size view</p>
</div>
</div>
</div>
https://www.codeply.com/go/PrAVeQSgb4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With