0

Attempted to change the breakpoint for lg from the default to 1025:

@import "../scripts/bootstrap-4.1.1/scss/bootstrap";
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1025px,
  xl: 1200px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 993px,
  xl: 1140px
);

It was my hope that on my tablet (which is 1024px in landscape mode) would stack the following cards 2 over 2 rather than 1 over 4. The change does not appear to be working.

<div id="home">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-title">Card 1</div>
                    <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                    <div class="btn-cntr"><button class="float right">Read More...</button></div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-title">Card 2</div>
                    <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                    <div class="btn-cntr"><button class="float right">Read More...</button></div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-title">Card 3</div>
                    <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                    <div class="btn-cntr"><button class="float right">Read More...</button></div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-title">Card 4</div>
                    <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                    <div class="btn-cntr"><button class="float right">Read More...</button></div>
                </div>                          
            </div>
        </div>
    </div>
</div>
OdatNurd
  • 19,513
  • 3
  • 51
  • 61
Elcid_91
  • 1,466
  • 2
  • 20
  • 44
  • Are you using SASS? The breakpoint can be changed using SASS which requires server side compilation to produce the CSS. – Zim May 31 '18 at 17:14
  • Hey Zim. Using SASS and ST3 is compiliing the css. – Elcid_91 May 31 '18 at 17:17
  • ST3 has an add-on that will compile the SASS into CSS when you save the file. – Elcid_91 May 31 '18 at 17:26
  • Then it's not a Bootstrap issue and a problem with how the SASS is getting compiled. The SASS you posted works as expected: https://www.codeply.com/go/oxjr2CJAoN – Zim May 31 '18 at 17:33
  • Found the problem. Imported bootstrap.scss BEFORE I set the override. Thanks again, Zim. – Elcid_91 May 31 '18 at 17:44

0 Answers0