Activate bootstrap's responsive design exclusively for mobile devices

I am facing an issue with my Bootstrap templates where they resize on all devices, instead of just mobile devices, and maintain responsive behavior only after a certain width. For instance, on a 15-inch laptop, when I resize the browser to half the size, it adds a horizontal scrollbar to the page.

I have attempted using container-sm and container-md classes, but the template still shrinks when I resize the browser. How can I modify this behavior? Here is what my current template looks like:

    <div class="wrapper">
        <div class="container-fluid pl-4 pr-5 pt-4">
            <div class="row">
                <div class="col-sm-3">
                  <!-- content -->    
                </div>
                <div class="col-sm-6 order-2">
                  <!-- content -->
                </div>
                <div class="col-sm-3 order-sm-2 order-sm-2">
                  <!-- content -->
                <div id="#footerPlaceholder"></div>
                </div>       
            </div>
        </div>
    </div>

Is there a way for me to ensure that columns only resize back after reaching a specific size?

EDIT: My goal is to have all elements within the "HTML" tag resize only for screens smaller than 600px in width.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To resolve this issue, try inserting col before col-sm-3. Here's an example:

Updated Code: If I understand correctly, you need to include a "col-4" (for instance) size for all other devices prior to your breakpoint device like small screens.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
<div class="wrapper">
    <div class="container-fluid pl-4 pr-5 pt-4">
        <div class="row bg-info">
            <div class="col col-4 col-sm-12 bg-info">
              Test  
            </div>
            <div class="col col-4 col-sm-12 order-2 bg-danger">
              Test
            </div>
            <div class="col col-4 col-sm-12 order-sm-2 order-sm-2 bg-success">
              Test
            <div id="#footerPlaceholder"></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

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

htmlcsscss-floatwidth

Switching picture using dropdown menu in javascript/jquery

Having some trouble trying to recreate this example. The initial image shows up, but it doesn't change when I select a different option. Still getting the hang of javascript so any help is appreciated. <html> <head> <script src="/j ...

javascriptjqueryhtml

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

jquerycss

Tips for populating text box values using AngularJSWould you like to learn how

I have a UI table in HTML where I display records fetched from the database using AngularJS. Scenario: There is a text box where I can select an ID and the related fields are displayed in the table mapped for that particular ID. <td>Name</td> ...

htmlangularjs

placeholder for selecting a file

I'm struggling to replace "no file chosen" with "cv" on the file input field. I tried adding a placeholder, but it didn't work as expected. https://i.sstatic.net/wQqcS.png <div class="col-md-6 form-group "> ...

htmlcssbootstrap-4

Display the entire width of the element without obstructing any subsequent elements

I have a main container with an inner container. I want the inner container to span the full width of the screen. The challenge is that I can't simply set the inner container's width to 100vw because it is nested within the main container, which ...

htmlcss

Prevent jquery-ui datepicker from opening when the confirmation box is cancelled

Here are the snippets of code I'm currently working with: HTML, Date : <input id="datepicker"> Fare : <input id="fare"> JS, <script> $(function(){ $("#datepicker" ).datepicker({ changeMonth: true, ...

jqueryhtml

Value attribute in an HTML input

Can you help me with an HTML question? I want to create a form that displays one value but posts a different value. <form action="" method="post"> <input type="submit" name="action" value="Buy"/> </form> For instance, I want t ...

htmlformssubmit

Utilizing Bootstrap 5's table design to occupy the rest of the available vertical

In my .NET Core 7 MVC project, I am facing a challenge where I want to make a details table scroll and occupy the available vertical space on the screen dynamically. I have tried using h-25, h-50 classes to achieve the scrolling effect on the table. Howev ...

htmljquerycssbootstrap-5

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Having trouble with this script. The opacity transition works fine, but there seems to be an issue with the loop causing it to run indefinitely. My goal is to change the z-index once the opacity reaches 0. HTML <div class="ribbon_services_body" id="ri ...

javascriptcssdo-while

"Using Rails remote link to create a standalone 'button' element, not embedded in a line of text or a

In my current project, I am attempting to create an ajax "button" that mimics the functionality of a typical link_to "content", some_path, remote:true. The goal is to have this button swap out images to indicate different statuses when clicked (e.g. on/off ...

jqueryhtmlruby-on-railsajaxbutton

The functionality of Foundation's 12 grid system is not functioning correctly

Check out the code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="style ...

htmlcssresponsive-designzurb-foundation

Enable automatic dropdown menu activation on mobile browsers specifically tailored for Android devices

Is there a way to automatically trigger the opening of a combobox on Android device browsers? Here is the code I have: <!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ...

javascriptjqueryhtmljquery-mobilemobile-website

Z-index malfunctioning - need to troubleshoot

Check out my website at Upon visiting the website on a PC, you'll notice that the navigation menu appears on the loader. Can anyone explain why this is happening? The only modifications I made to my CSS are: <style> .navbar-inverse { backg ...

htmlcsstagsnav

The functionality of the "this" keyword appears to be malfunctioning

I've been grappling with the concept of the this keyword in JavaScript and decided to create this script to test it out: function click(){ this.innerHTML="changed"; } However, when I tried to use it in this HTML: <button id="clicker" onclick ...

javascripthtmlthis

Enable users to modify the URL in the window.open() function

In the code snippet below, a new window opens when a user clicks on a button: $('.loginButton').click(function () { var strString = $("#medlineSearch").val() var strSearch = "http://google.com&query="; var url = strSearch + strSt ...

javascriptjqueryhtml

Tips for adding line breaks in Jade HTML using the br tag

Can someone help me figure out how to include a tag? I've tried but it's not working. table tbody td Juan Perez td 01 33 4455 6677 td Av José Vasconcelos 804-A Pte. br Col. Los Sabinos,CP. 66220, San ...

htmlpug

Is there a way to load HTML files without requiring me to save them in a static folder?

While my index page loads fine on the browser, when I click on the home page or any other link like contact, it gives a 404 error and tries to access static/index.html. Why is it looking for index.html in the static files and how can I fix this issue? I i ...

pythonhtmldjangoweb

Excel File Download Prevents Bootstrap Modal from Closing

I have incorporated NPOI into my website (asp.net / C# / bootstrap 4) to enable users to download an Excel file. The code snippet responsible for downloading the file is shown below: //***************************************** //* Workbook Download & ...

c#asp.netbootstrap-4bootstrap-modalnpoi

Issue with demonstrating the Material Angular expansion-panel feature

Exploring the world of Material Angular has been an exciting journey. Recently, I've been experimenting with adding components to my project. Currently, I'm focused on incorporating the expansion-panel component example into a dialog. However, de ...

htmlangulartypescriptangular-material