How to use grid-breakpoint class in Bootstrap ? - GeeksforGeeks

08 Jul, 2020
To get the grid-breakpoint value, we can use display property of bootstrap. Alter the value of display property with responsive display utility classes. Classes can be combined for different impacts as you need.
.d-{value} for xs
.d-{breakpoint}-{value} for xl, lg, md and sm.
Here value can be one of them like none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.
The media queries impact screen widths with the given breakpoint or larger. Example, .d-md-none sets display: none; on md, lg and xl screens.
Grid-breakpoints are
 xs: <576px Extra small gadgets (portrait phones, less than 576px).
 sm: >=576px Small gadgets (landscape phones, 576px and up).
 md: >=768px Medium gadgets (tablets, 768px and up).
 lg: >=992px Large gadgets (desktops, 992px and up).
 xl: >=1200px Extra-large gadgets (large desktops, 1200px and up).
To cover up components use the .d-none class or one of the .d-{sm, md, lg, xl}-none classes for any responsive screen variety.
To show a component as it were on a given interval of screen sizes you will be able to combine one .d-*-none class with a .d-*-* class, for illustration .d-none .d-md-block .d-xl-none will cover up the component for all screen sizes except on medium and large gadgets.
Example 1:
HTML
<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width,         initial-scale=1,         shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">      <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js,          then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"        crossorigin="anonymous">    </script>          <title>bootstrap4 | grid-breakpoint</title></head>  <body>    <center>        <h1 style="color: green">GeeksforGeeks</h1>                  <div class="d-inline p-2 bg-primary text-white">            Visible on all screen-size        </div>          <div class="d-inline d-sm-none p-2 bg-dark                         text-white">            Only Visible on xs (less             than 576px) screen-size        </div>                  <div class="d-none d-sm-inline d-md-none                 p-2 bg-success text-white">            Only Visible on sm (767px to             576px) screen-size        </div>                  <div class="d-none d-md-inline d-lg-none                 p-2 bg-danger text-white">            Only Visible on md (991px             to 768px) screen-size        </div>                  <div class="d-none d-lg-inline d-xl-none             p-2 bg-warning text-white">            Only Visible on lg (1199px             to 992px) screen-size        </div>                  <div class="d-none d-xl-inline p-2                 bg-light text-black">            Only Visible on xl (>=1200px)             screen-size        </div>    </center></body>  </html>
Output:
Example 2:
HTML
<!DOCTYPE html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width,         initial-scale=1,         shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">      <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js,         then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"        crossorigin="anonymous">    </script>          <title>Bootstrap4 grid-breakpoint</title></head>  <body>    <center>        <h1 style="color: green">            GeeksforGeeks        </h1>                  <div class="d-block p-2 bg-primary                 text-white">            Visible on all screen-size        </div>                  <div class="d-none d-sm-block p-2             bg-dark text-white">            Hidden on xs (less than             576px) screen-size        </div>                  <div class="d-none d-md-block p-2             bg-success text-white">            Hidden on sm (767px and             less) screen-size        </div>                  <div class="d-none d-lg-block p-2             bg-danger text-white">            Hidden on md (991px and             less) screen-size        </div>                  <div class="d-none d-xl-block p-2             bg-warning text-white">            Hidden on lg (1199px and             less) screen-size        </div>                  <div class="d-xl-none p-2 bg-light             text-black">            Hidden only on xl (1200px             and up) screen-size        </div>    </center></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Picked
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?