Ways to turn off the adaptive transient feature

Is there a way to turn off the responsive features and grid layout of Bootstrap?

While creating a website for a company, I ensured that it was responsive for mobile devices. However, the company now wants a different design specifically for mobile, with the desktop version being launched first. They want the desktop design to remain unchanged even when the site is viewed on a mobile device or when the browser window is resized to a smaller size, requiring users to scroll horizontally to navigate.

I attempted to use min-width on the wrapper/body, which increased the width but the Bootstrap grid elements remained responsive. Are there any simple CSS tricks to address this issue?

Here is the code sample for reference: https://jsfiddle.net/j17qtLfv/

I want to maintain the 2 or 3 column layout regardless of the screen size.

Can anyone provide assistance with this?

htmlcssbootstrap-4

Answer №1

To achieve a consistent column layout on all screen sizes, it is advised to remove the class names that specify different column layouts for smaller screens.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#block{
  background:red;
  min-width:1000px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div id="block">

<div class="container">
  <div class="row">
    <div class="col-6">
      1 of 2
    </div>
    <div class="col-6">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      1 of 3
    </div>
    <div class="col-4">
      2 of 3
    </div>
    <div class="col-4">
      3 of 3
    </div>
  </div>  
</div>
</div>

Answer №2

In this article, you'll find a tutorial on how to deactivate the responsive features of bootstrap.

Check out this link for more information.

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

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

javascripthtmljspjquerystruts

Buttons are excellent for desktop displays but may not be as visually appealing on mobile devices, especially when using Bootstrap 4

As someone new to coding, I have been given the task of revamping my school's website. I have used buttons for navigation on certain pages, but I have noticed that they do not look good on mobile devices. How can I improve their appearance, perhaps b ...

bootstrap-4

What could be causing my external JavaScript file to not function properly upon loading my HTML file?

I have organized my code by separating the HTML and JavaScript portions. The JavaScript code is now in its own separate file and I use 'script' tags to reference it in the HTML file. Within the JavaScript code, I have two functions - one creates ...

javascripthtmlnode.js

Change the default content of the jQuery menu with a content changer

After sharing some base code for a webpage to dynamically change its content based on menu selections, I wanted to showcase the code. Take a look below: HTML: <!DOCTYPE html> <html> <head> <link rel='stylesheet' type=&apos ...

jqueryhtmlmenudefault

Gradient Border on CSS Button

I'm trying to create a button with a silver-ish border and gradient like the one in the picture. I've managed everything except for the border, which is giving me some trouble. Here's the current CSS code I'm using for the button. http ...

htmlcssbutton

Display a div beside it when hovering over a specific part of the image

If I have an image that is 200px wide and 900px tall How can I make a div display alongside it when hovering over a specific section of the image? ...

javascriptjquerycss

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

javascripthtmlflashvideo

Properly Positioning Text within React's Material UI Components

I am encountering a simple issue where I am trying to align '01/01/2020' with 'A00002'. To view my code on CodeSandbox, please visit CLICK HERE <div className={classes.root}> <Typography variant="h6" className={cla ...

cssreactjsmaterial-uijss

Ways to update a component's state by clicking a button located on a different component

Seeking help with changing a parent state value when clicking a button. Although there are numerous similar queries out there, I'm really struggling to grasp the concept. I've attempted lifting the state up but haven't quite nailed it yet. ...

javascripthtmlreactjs

Maintaining the format of forms input in Rails and HTML: Tips and tricks

Hey there! I'm working on a Rails app that has a simple HTML form. One of the fields is called description, which is a text_area. I want to be able to display its input exactly as it was entered on the index page. For instance: If someone enters a l ...

htmlruby-on-railsruby-on-rails-3forms

What is the best way to store article IDs using Javascript or HTML?

On my web page, I have a collection of links that users can interact with by clicking and leaving comments. These links are loaded through JSON, each with its unique identifier. But here's my dilemma - how can I determine which link has been clicked? ...

javascriptjqueryhtmljsonjquery-ui

Achieving perfect alignment of an iframe on a webpage

Having an issue with aligning the iframe on my website. I have two buttons set up as onclick events that connect to internal pages displaying PHP data in tables within the iframe. Despite trying various CSS styles and positioning methods, I can't seem ...

javascripthtmlcssiframe

The backend error message isn't triggering an alert!

My current issue involves using jQuery to execute a .php file. Whenever an error occurs in the backend, I want to display an alert message with the error details. However, when intentionally submitting with an error, no alert pops up and it just proceeds t ...

javascriptphpjqueryhtmldatabase

Show images exclusively on screens with a smaller resolution

Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing. <style type="text/javascript> .icon-xyz {float: left; width: 22px;cursor: pointer;background: none;} @me ...

javascripthtmlcssmedia-queries

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

Center-aligned Bootstrap column with a width of 50% and centered vertically

I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically ...

htmlcsstwitter-bootstrap

How can users change the displayed Twitch channel?

My coding skills aren't the greatest, especially when it comes to something like this. I've tried searching for a solution with no luck, so I apologize if this is too basic or impossible. I have a simple page that loads up Twitch with a predefin ...

javascripthtmltwitch

Troubleshooting regex validation issues in a JSFiddle form

Link to JSFiddle I encountered an issue with JSFiddle and I am having trouble figuring out the root cause. My aim is to validate an input using a regex pattern for a person's name. $("document").ready(function() { function validateForm() { var ...

javascriptjqueryhtmlcssjsfiddle

changing the gradient color stops of an SVG on hover

Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradie ...

htmlcsssvg

Make the height of the input element equal to 100% of its parent

I am struggling with setting the height of input (type text) to fit 100% of its parent element (td). I attempted to individually adjust the height of each input using jQuery, but this method is time-consuming, especially since the site I am working on ha ...

htmlcssinputhtml-table