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
  • 21,371
  • 3
  • 50
  • 68
Elcid_91
  • 1,571
  • 4
  • 24
  • 50

0 Answers0