Differences between col-, col-sm-, col-md-, col-lg-, col-xl-

Ethan Karla 640 28 Jul 2021

What are the differences between col-, col-sm-, col-md-, col-lg-, col-xl-?

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

While Bootstrap uses ems or rems to define most sizes, px is used for grid breakpoints and container widths. This is because the width of the viewport is in pixels and does not change with font size.

See how aspects of the Bootstrap Grid System work on multiple devices with a handy table :

Extra small	Max container width	Class prefix	# of columns
<576px Small	None (auto)	.col-	12
≥576px Medium	540px	.col-sm-	12
≥768px Large	720px	.col-md-	12
≥992px Extra large	960px	.col-lg-	12
≥1200px	1140px	.col-xl-	12

Here is the example for the responsive grid columns :

<!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 d-flex align-content-center justify-content-center'>

        <!-- 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'>.col-12 .col-md-8</div>

            <div class='col-6 col-md-4'>.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'>.col-6 .col-md-4</div>

            <div class='col-6 col-md-4'>.col-6 .col-md-4</div>

            <div class='col-6 col-md-4'>.col-6 .col-md-4</div>

        </div>

        <!-- Columns are always 50% wide, on mobile and desktop -->

        <div class='row'>

            <div class='col-6'>.col-6</div>

            <div class='col-6'>.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

Differences between col-, col-sm-, col-md-, col-lg-, col-xl-

Can you answer this question?

1 Answers