'I want to show my progress bar in this format col-sm-6 in >546px screen(sm) but its doesn't show any changes no matter what i do

if bootstrap can't handle this can anyone suggest an other method ya even I have use col-xs-6 all I want to show my progress bar in image shown in small screen size

here that's how want to show my image in small screen

<div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-3">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-4">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-5">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-6">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>
htmlcssgridprogress-barbootstrap-5


Solution 1:[1]

You can add this @media only screen and (max-width:546px) if you want it smaller than 546px. if it doesnt work put !important on all of it.

.row {
  display:grid;
  grid-template-columns:auto auto;
  grid-gap:10px;
  }
 
<div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-3">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-4">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-5">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-6">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Crystal

Related Questions