Responsive Grid for all types of devices

Ethan Karla 406 28 Jul 2021

How to make a responsive grid for all types of devices?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 29 Jul 2021

Responsive containers are used to be 100% width until the breakpoint of that particular column has reached. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will range up with md, lg, xl, and xxl.

<div class='container-sm'>100% wide until small breakpoint</div>
<div class='container-md'>100% wide until medium breakpoint</div>
<div class='container-lg'>100% wide until large breakpoint</div>
<div class='container-xl'>100% wide until extra large breakpoint</div>
<div class='container-xxl'>100% wide until extra extra large breakpoint</div>

Below is an example for the responsive grid :

<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='container pt-4'>
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class='row'>
            <div class='col-12 col-md-8  bg-info text-dark'>.col-12 .col-md-8</div>
            <div class='col-6 col-md-4 bg-secondary text-light'>.col-6 .col-md-4</div>
        </div>
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class='row'>
            <div class='col-6 col-md-4 bg-danger'>.col-6 .col-md-4</div>
            <div class='col-6 col-md-4 bg-secondary text-light'>.col-6 .col-md-4</div>
            <div class='col-6 col-md-4 bg-danger'>.col-6 .col-md-4</div>
        </div>
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class='row'>
            <div class='col-6 bg-secondary text-light'>.col-6</div>
            <div class='col-6 bg-warning'>.col-6</div>
        </div>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>
    -->
</body>
</html>

Hope this will help you.

Happy Coding!

forum

Responsive Grid for all types of devices

Can you answer this question?

1 Answers