Different behaviours for col-lg

Question

I have a card that uses size 3 for col-lg. But I want a different behaviour for monitors 1920x1080 and 1366x768. But both are still col-lg.

For example:

col-1g-2920x1080 = col-IgG
col-1g-1366x768 = col-IgG

<div class="catalogo">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>

bootstrap is only built to a standard size. If you want to add in extra code to there grid you will need to write your own code in CSS with a media query. Bootstrap Grid - https://getbootstrap.com/docs/4.0/layout/grid/ - CSS media query - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp — Andrew, Apr 20 '18 at 13:49

Jonathan Lam · Answer 1 · 2018-04-20T13:53:43.333

1

You can use CSS media queries to differentiate between the two screen sizes:

E.g.:

.col-lg-3 {
    /* styles for 1366x768px screen */
}
@media screen and (min-width: 1920px) and (min-height: 1080px) {
    .col-lg-3 {
        /* styles for screens larger than or equal to 1920px by 1080px */
    }
}

edited Apr 20 '18 at 13:53

answered Apr 20 '18 at 13:50

Jonathan Lam

16,831
17
68
94

I do not know what to put in the style of col-lg-3 – Rafael Augusto Apr 20 '18 at 13:53
@RafaelAugusto How do you want to style the two (i.e., explain the "different behavior" you mentioned in your question)? You never specified in your question. – Jonathan Lam Apr 20 '18 at 13:54

score 1 · Accepted Answer · edited Apr 20 '18 at 16:29

You can do same as you were doing earlier but need to download the bootstrap 4 sass file and reset lg grid breakpoint from _variables.scss file to 1080px like this

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1080px,
  xl: 1200px
) !default;

and recompile the entire source to get new custom bootstrap CSS file. and use it like this.

<div class="catalogo">       
 <div class="row">         
  <div class="col-12 col-md-6 col-lg-3 "> </div>
 </div>
</div>

This is the file you need to change. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

But as a developer this is not recommended. But of course, it is possible if you deliberately want to achieve such kind of design.

Bootstrap 3 uses less preprocessor I believe it's variable.less contain @screen-sm: 768px; @screen-md: 992px;@screen-lg: 1200px; no xl so you can edit according to your need and recompile it. I think this should work.

This project uses css and bootstrap 3. Can I do something like this in boostrap3? — Rafael Augusto, Apr 20 '18 at 14:14

Different behaviours for col-lg

2 Answers2

Linked

Related