Bootstrap - breakpoint for screen resizing fails to initiate column resizing

In my design, I created two classes designated for the md and sm sizes. The sm size was meant to trigger the stacking of columns in a vertical manner.

Surprisingly, when it comes to Bootstrap, the default breaking point is actually xs, which is supposed to have the same effect. However, nothing happens as expected.

For vertical stacking to occur, I found that I need to set the number of columns to 12 without assigning any other classes for specific screen sizes.

You can view the code here:

cssbootstrap-4resize

Answer №1

It seems like the <link> & <script> tags for Bootstrap may have been copied incorrectly. Remember to pay attention to your indentation as well. For proper functionality, it's recommended to place your <link> tags before your <script> tags. Replace your current <link> & <script> tags with the following code in the exact order listed below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer №2

Bootstrap Breakpoints define the minimum screen size at which the columns will take effect.

For instance, classes like col-md will only be active on screen widths larger than 768px.

To view the complete list of breakpoints and their corresponding sizes, click here.

A sample code snippet is provided below:

<html>

<head>
  <style>
    .row {
      margin-bottom: 10px;
    }
    
    .a {
      background-color: red;
    }
    
    .b {
      background-color: blue;
    }
    
    .c {
      background-color: green;
    }
    
    .d {
      background-color: gray;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="a row">
      <div class="b col-lg-2">large</div>
      <div class="c col-lg-4">large</div>
      <div class="d col-lg-6">large</div>
    </div>
    <div class="a row">
      <div class="b col-md-2">medium</div>
      <div class="c col-md-4">medium</div>
      <div class="d col-md-6">medium</div>
    </div>
    <div class="a row">
      <div class="b col-sm-2">small</div>
      <div class="c col-sm-4">small</div>
      <div class="d col-sm-6">small</div>
    </div>
  </div>
</body>

</html>

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

Interaction between the app component's HTML and TypeScript files

I have created an Angular form in my app.component.html file and now I want to send the input data to an API using the app.component.ts file. How can I access the input values from the .html file in the .ts file where I am processing the data for the API? ...

javascriptangularformsbootstrap-4

How to toggle the visibility of checkboxes in JavaScript based on their checked status

I am facing an issue with some checkboxes as I am unable to filter them based on whether they are checked or not. The concept is simple. When I click on "All", all the checkboxes should be displayed. However, when I click on "Selected", only the selected ...

javascriptjqueryhtmlcsscheckbox

The focus state persists even after the DOM element has been modified

I am currently utilizing Vue along with Bulma. My challenge lies in updating the DOM upon a button click event. Even after the update, the button still retains its focus state. I aim to have the updated button without the focus state. What would be the m ...

javascriptcssvue.jsbulma

JavaScript Expandable Divs: Create versatile and dynamic div elements

I have successfully implemented the expandable feature, but I am looking for a way to make the "read more..." link disappear once it is clicked. Despite browsing through StackOverflow for code and solutions, I cannot seem to find a solution that makes the ...

javascripthtmlcss

Overriding Bootstrap's Sass variables

Struggling to customize Bootstrap variables in my main.scss file @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; $primary: green; ...

csssassbootstrap-5

Positioning a dropdown menu on top of a Google Map in React with JavaScript: Best Practices

I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable). Below is the current output I am seeing: Here is the expected result: Modifications After trying ...

javascripthtmlcssnode.jsreactjs

What is the best way to resize an image within a div that is contained within a grid layout?

I'm currently working with a grid layout. I utilized grid-template-columns and grid-template-rows to outline its structure. My aim is for the first cell to feature an image. To horizontally center it, my plan was to enclose it within a div that can ac ...

htmlcssweb

Switching between different CSS transition effects

Perhaps my approach is not ideal, so please feel free to provide feedback if this is not considered best practice. I have created DIVs that contain a checkbox and label. These styled DIVs resemble buttons, and I have implemented code to allow users to tog ...

jqueryhtmlcsscss-transitions

Animating the menu's height using CSS when it is being displayed or hidden

Currently, I am in the process of developing a horizontal navigation bar with a collapsible menu. For this project, I am utilizing bootstrap 4 and angular. The collapsing and showing functionality is operating as expected when clicking on the menu icon. Ho ...

htmlcssbootstrap-4css-transitions

What could be causing my randomly generated value to be overwritten so quickly?

I'm encountering an issue with my code. I am attempting to generate objects in random locations using drawHyperBall(), getRandomIntX(), and getRandomIntY(). However, the random value seems to be constantly overwritten. How can I resolve this problem? ...

javascriptcss

header color scheme and dimensions

Hello, I've managed to get the menu working correctly on my website at www.g-evo.com/header.php. However, I'm now facing an issue with the size of the header. I'd like to shrink the grey area slightly so it aligns better with the logo, while ...

phpcssheader

Sort out the DIVs containing card elements

Is there a way to filter DIVs containing cards based on their categories? I seem to be encountering an issue where the filtering only works with letters. I suspect the problem lies in the Javascript code, but I can't pinpoint it. Can you help me ident ...

javascripthtmljquerycss

Ensure that only one menu with a specific class is open at any given time

My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achi ...

javascriptjqueryhtmlcss

I am experiencing an issue where the horizontal scrollbar in my asp.net panel is not functioning properly for scrolling

Within my MVC Asp.net project, I have a repeater enclosed in a panel. Although the scroll bar is visible, the table within seems to adjust its size horizontally to fit inside the panel rather than overflowing beyond it. The scrollbar is displayed but rema ...

asp.netcssscrollbar

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

What I've done: I already have knowledge on how to add an LI to UL, but it always goes to the bottom. What I'm trying to achieve: Add an LI to the top so that when my div.todos-wrapper (which has y-oveflow: hidden) hides overflow, the todos you a ...

javascriptcssnode.jsmongodbejs

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

The dropdown menu is not being displayed, and instead the title is showing a message that says "Nothing Selected." Please review the code for any

I've been attempting to automatically select an option in a dropdown menu, but for some reason it's not displaying the dropdown and instead showing "Nothing Selected" as the title. I tried using opt.setAttribute("selected", "selected"); in my cod ...

javascriptjavahtmljquerybootstrap-4

The code "transform: rotate(' ')" does not seem to be functioning properly in Javascript

I set out to create a simple spin wheel exercise, but it quickly became more challenging than I anticipated. After researching how to make one online, I found code similar to mine that worked on a JSFiddle Example, yet my own code still didn't work. ...

javascripthtmlcss

What is the best method for designing styles for a Reason-React component that are based on the props?

To gain knowledge in reason and reason-react, I am currently developing a straightforward “Things 2 Do” application (view source code on GitHub). I have implemented a TodoItem component that should display with a strike-through style when the task is ...

cssreactjsreasonreason-react

What is the reason for the absence of vertical spacing between rows in Bootstrap 4?

As I transition from Bootstrap 3 to Bootstrap 4, I've noticed that there is no longer vertical space between rows by default in Bootstrap 4. Can anyone shed light on why this change was made? Is there something missing in my HTML code? <div class= ...

bootstrap-4twitter-bootstrap-4