Bootstrap HTML - Medium-Sized Device Recognized as Large on Registration

Encountering some troubles with Bootstrap's Grid system on various devices. According to documentation, column sizes are based on window size:

Extra small 576px , Small >= 768px , Medium >= 992px , Large >=1200px

However, a medium device (rotated iPad at 1024 x 768) is being recognized as large by Bootstrap. Code snippet:

<div class="col-lg-2 col-md-4 col-sm-4">

When in landscape mode, the iPad shows the div at a larger column size than expected. Console log confirms the screen size as 1024px. Any insight on this issue?

htmlcssgoogle-chromebootstrap-4

Answer №1

Your issue stems from a slight misunderstanding of how Bootstrap handles its breakpoints. Specifically, you've mistaken the large breakpoint (>= 992px) for the extra large breakpoint (>= 1200px).

Although your iPad doesn't fall into the extra large category (which uses the .col-xl- prefix), it does indeed fit within the parameters of the large breakpoint (utilizing the .col-lg- prefix). This is why the .col-lg-2 class has been correctly applied to your element, allowing it to occupy two columns.

For a visual reference of Bootstrap's breakpoints and corresponding classes, take a look at this informative image.

https://i.sstatic.net/kuMLz.png

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

Labels are overlapping each other and being aligned to the right side

Working with the most up-to-date version of Bootstrap, I am currently designing a search bar featuring a dropdown menu preceding the search button. Upon clicking the dropdown, various controls are revealed. Below is the HTML code for this configuration: ...

htmlcsstwitter-bootstrap

What could be the reason why the .click function is not functioning as

I'm completely new to jQuery and I'm working with an HTML element that looks like this: <input type="button" value="Cancel" class="supportButton" id="whitelist.onCancelUploadButton" onclick="whitelist.onCancelUpload();"> By using the foll ...

jqueryhtml

Guide to assigning a value to a label in Razor's Html.DropDownList

I'm trying to assign a specific label value to the dropdownlist instead of the default value, but it seems like I might be making a mistake. @Html.DropDownList("cboCategoria", new SelectList(Model, "ID", "Nome"), new { @id = "cboCategoria", @label = ...

htmlrazor

Boss declares, "Display the iFrame with no borders visible."

Good day to everyone, I am currently dealing with an issue on the page: It seems to be working perfectly in all of my browsers except for Internet Explorer. Since I don't have IE, I'm having trouble troubleshooting this. My boss mentioned somet ...

htmlcsslivemodal-dialogcolorbox

Automatically altering variable without manual intervention

Hey there, I'm encountering a strange issue with the form below echo "<td class='contact-delete'> <form method='post' action='update_record.php'>"; echo "<button type='submit' value='" . $ ...

phphtml

Unable to Upload Image to MySQL Database

I encountered an unidentified index error when trying to upload images. I added a check to prevent the error, but the images are still not being uploaded. I have tested with legitimate images, but nothing seems to work. I've been struggling with this ...

phpmysqlhtml

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

<div id="sidebar" class="sidebar"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"> <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: a ...

javascriptjquerycss

Occupying the entire width of a screen

Struggling to tidy up a website I'm working on for a client. I've spent countless hours trying to solve this issue! With my limited knowledge, I could really use some help with the code. The main challenge is making the top section of the site (o ...

csshtmlwidth

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300 ...

htmlcss

Executing a function should be delayed until all necessary information is obtained from the REST Api

I want to create a chart showing data for each month over the course of 12 months. The data for each month will be retrieved from a REST API. Here is my approach: $.getJSON(link, function(data){ // store data in a variable } Repeat this process 12 t ...

javascripthtmlcanvasonloadcanvasjs

updating dropdown options based on user input with PHP

I need help with implementing a code for two dropdown boxes. The first dropdown should display main category values dynamically, and when a value is selected, the second dropdown should appear with corresponding sub-category values. How can I achieve this ...

javascriptphpjqueryhtmlajax

Align the positioning of the dropdown menu and the input field

I'm having trouble with css and ng2-completer. I am attempting to line up the dropdown section with the input field. Unfortunately, there is no demo example provided on the page showing how to target elements using css. I've tried selecting the ...

cssangularng2-completer

Connecting Angular TextArea functionality to the Ctrl-Enter keyboard shortcut

Recently, I've been working on creating a custom functionality for the <textarea> element. My goal is to have the enter key trigger a specific function, while using ctrl+enter will add a new line in the textarea. I've tried looking through ...

htmlangularbootstrap-4ng-bootstrap

The sidebar's bottom gets concealed beneath the page's window

I seem to be facing an issue with the sidebar where the bottom section is not visible. Interestingly, when I remove the top navbar, everything works fine. Despite my efforts to troubleshoot and apply various solutions, none of them seem to work for me. Do ...

htmlcssgridoverflowbootstrap-5

The excessive width of the navigation bar resulted in additional blank space on the right side of

My navigation bar is causing me trouble as it appears to be too wide, creating extra space on the right side. I've tried adjusting the width with some code, but as I'm working on making the site responsive, shrinking the code down to around 320px ...

htmlcssnav

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...

javascriptjqueryhtmlcss

What is the best way to elegantly transition an element with Hammer.js and JQuery?

As I work on developing a versatile web application meant for use on computers, tablets, and possibly smartphones, I've encountered a design challenge with the menus. Currently, the menus are laid out horizontally on one page, allowing users to swipe ...

javascriptjqueryhtmlcsshammer.js

Efficiently styling table Spans with styled components in React

Can anyone help me with a frustrating CSS problem I'm facing? I am trying to render these tags as spans, but they are not separating properly as shown in the image below. They appear stuck together and I can't figure out why. I am using styled co ...

javascriptcssreactjsmaterial-ui

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

The automatic selection process for IE document modes

It may seem simple, but I'm a little perplexed about how IE decides which browser mode to use. In IE9, there are options such as IE9 Compatibility Mode, IE9, IE8, and IE7. These modes are selected automatically depending on the webpage. Can someone e ...

htmlinternet-explorer