I am trying to display my progress bar in a col-sm-6 format on screens larger than 546px, however, despite my attempts, I am not seeing any changes on the screen

Is there an alternative method if bootstrap is unable to handle this? I have used col-xs-6, but all I want is to display my progress bar in the image shown on small screens.

Here is how I want to display my image on small screens.

<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

Answer №1

To make this responsive for screens max-width of 546px, add the following @media query: @media only screen and (max-width:546px) If it doesn't work, consider adding !important to override any conflicting styles.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

htmljquery

Is it possible to utilize CSS rules for a non-existent div within CSS?

Can this be achieved using CSS? If .div1 is not present, enforce the following rule: .div2{ property: value; } For example, <div class="div1"> ... </div> <div class="div2"> <!-- it exists, so no action needed --> </div& ...

htmlcsscss-selectors

The issue of CSS not being applied to HTML content after being inserted via AJAX has been encountered

I've successfully implemented AJAX to retrieve specific page content from a database, but now I'm facing an issue: When it comes to the 'Contact' page, the form retrieved from the database (as HTML) is not applying the CSS styles I hav ...

phpjavascripthtmlcssajax

Tips for transferring information obtained from an API to my custom HTML page

As a novice in web development, I recently created a simple weather report website using the OpenWeather API. While I successfully fetched data from the API, I encountered an issue trying to display this data on my HTML page. Despite utilizing DOM manipu ...

javascripthtmlnode.jsapiexpress

Is BEM mandating the creation of superfluous elements?

<header> <a href="#"><img src="kitty.jpg" /></a> ... </header> In the context of organizing for BEM, take this example within the header section that is not dependent on the header block. To adhere to BEM guidelines, I op ...

htmlcssbem

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

javascriptphphtmllaravelvue.js

Are there any reliable PHP classes available to generate HTML tables efficiently?

Searching for an advanced PHP class that can effortlessly create intricate HTML tables, including the ability to handle colspan/rowspan and assign specific CSS classes to rows, columns, and cells. ...

phphtmlhtml-table

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Creating a tool that produces numerous dynamic identifiers following a specific format

I am working on a function to create multiple dynamic IDs with a specific pattern. How can I achieve this? followup: Vue.js: How to generate multiple dynamic IDs with a defined pattern Details: I am developing an interactive school test application. Whe ...

javascriptjqueryhtml

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

Does using .detach() eliminate any events?

I have a DIV that is filled with various content, and I am using the detach() and after() functions to move it around within the document. Before moving the DIV, I attach click events to the checkboxes inside it using the bind() function. Everything seems ...

javascripthtmljquery

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

javascripthtmlangulartypescriptangular-material

What steps can I take to stop a select box within a flex container from shrinking?

Currently working on some code that involves a flex container. Struggling to prevent fields from shrinking too much on smaller screen sizes. var crsdesc; //var for new window function popup(mylink) { if (!window.focus) return true; var href; if (t ...

htmlcssflexbox

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Can someone please explain why ng-repeat-start is not functioning properly despite using the most up-to-date AngularJS version? I have included it from the CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr ...

javascriptjqueryhtmlangularjs

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

javascripthtml

Add a combination of strings and a specific date to be stored in a MySQL database

Currently, I am in the process of troubleshooting a script designed to create SEO-friendly URLs. The script is almost functional, but my brain feels nearly fried trying to pinpoint why I keep receiving the incorrect value in MySQL. Here are the values use ...

phphtmlmysql

Ineffectiveness of Less Guard feature

I have a mixin with a guard clause that I've implemented following the provided guidelines. According to the syntax below, @palette should be selected from a list of custom colors and @color should be assigned a value from a specific set. The curren ...

cssless

A guide on extracting data from a Script element in an HTML file and saving it to a CSV file using Python Selenium

Looking for help with optimizing a Python script that extracts data from the Script tag on an HTML web page. The current output saved in a CSV file is not meeting my requirements: (1) the format is incorrect, and (2) there is unnecessary content included. ...

pythonhtmlseleniumcsvweb-scraping

Extract content within Python pre tags

A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...

pythonhtmlparsingbeautifulsouppre

I am in search of a specialized 3D camera with a unique effect

I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...

javascripthtmlwebgl