Utilizing Bootstrap 4's nesting feature for optimal layout on an iPad in landscape

My nested content is functioning properly on all screen sizes except for ipad-landscape. Wouldn't it make more sense for the class triggered on ipad-landscape to be col-sm instead of col-lg?

<div class="row">
    <div class="col-lg-3 col-sm-8 offset-sm-1">
        <div class="row">
            <div class="col-sm-12">
                <div>
                    //content
                </div>
            </div>
            <div class="col-sm-12">
                <div>
                    //content
                </div>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrap-4

Answer №1

Indeed, the correct class to use will be "lg" and not "sm", and here's why--
To begin, let's examine the dimensions for the iPad, which can be found in the responsive tab of Chrome Dev Tools.
Take a look at the Responsive tab in Chrome Dev Tools

The dimensions specified for the iPad in landscape mode are 1024 x 768, with a width of 1024 and a height of 768.
Next, referring to the Bootstrap4 Grid Docs, it is clear from the provided table that Large is ≥ 992px, indicating that devices with a width greater than 992px will receive the "lg" class.

Important: All dimensions outlined in the Bootstrap docs are in relation to the page width.
My reasoning for utilizing width is that for most websites, content needs to be adjusted both horizontally and vertically in order to prevent overflow.

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

How to ensure the height of an image in a Bootstrap flex row matches the

I just updated to the latest Bootstrap 5.0 beta version and I'm working with this html code snippet: <div> <div class="d-flex flex-row"> <img src="img/funny.png" alt=""> ...

htmlcsstwitter-bootstrapbootstrap-5

What is the right way to nest a SCSS rule for a specific selector within a list using the "&" symbol?

I have a question that I couldn't find the answer to in any documentation or on Stack Overflow. While this example may not be perfect, it should give you a basic understanding of what I'm trying to achieve. Illustration .btn-group { .btn ...

csssass

Ensure the website is able to adjust its size when the top banner increases in size

On my website, there is a top banner containing contact information that expands when clicked. However, the expanded div overlaps the site content. Is there a way to make the site scale with the expanded div so that the top of the site starts below it? I ...

javascriptjqueryhtmlcss

How to properly center and align the width of a figcaption element within an image placed in a figure element

I've been struggling for two days now trying to fix an issue with the alignment of images and captions on my Django application. In my app, users can upload images, and I'm using figure and figcaption tags to display the image with a caption. Ho ...

cssdjangohtmlwidthcenter

Steps to modify the background color of an IconButton upon clicking in Material UI

After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...

csstypescriptmaterial-ui

Align the logo in the center of the navbar with items placed on either side

Looking for a way to center my brand logo within my navbar with menu items positioned around it? Preferably without the use of javascript? I've tried different methods, including adjusting the Bootstrap navbar styling, but haven't found a perfect ...

htmlcsstwitter-bootstrapnavigation

Identifying the mobile browser initiating the request call

I'm in the process of creating a website that needs to be compatible with various devices such as iPhone, Android, Samsung Galaxy S/S2, iPad, Samsung Galaxy Tab, and more. Is there a method to identify the mobile browser requesting the page and apply ...

javascriptjqueryhtmlcss

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

csshtmlmasking

What is the best way to adjust the width of a column grid header in extjs

When adjusting the width of a vertical header in a grid to 50px, the header text disappears unless manually dragged to the left. How can I ensure the header text remains visible even with a smaller header size? Consider the following code snippet: { text ...

cssextjssassextjs5

Modifying CSS property values by handling a returned validation error

Allow me to describe a scenario I've created. Please excuse any language errors in my explanation. I have designed a form for users to submit values. Within this form, users can choose an option - one of which is "Others specify...". When this option ...

javascriptphphtmlcsslaravel

Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...

javascriptjqueryhtmlcssprettyphoto

Ensure the vertical alignment of the error tooltip remains consistent regardless of the length of its content

I have been working on an error tooltip that appears when the user hovers over an input field. The tooltip is almost finished, but I am having trouble aligning it vertically with the input field. I have tried multiple solutions without success. Check it o ...

javascripthtmlcssprototypejs

Blend a background image using rgba without incorporating a gradient effect

Can you merge a background image with an rgba color without resorting to an rgba gradient? My current CSS3 style appears as follows: html { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../icons/sombrero.jpg")no-repe ...

htmlcss

"Selecting options from a range - Bootstrap multiple

Currently, I am in the process of implementing a multiple-choice tick box for PHP. The code I have so far is as follows: <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="inp ...

phpcsstwitter-bootstrap

Should the letter 'p' be inserted into the letter 'a'?

After viewing a video on Bootstrap, I noticed an unusual occurrence where there was a p element nested inside an a element. Is this considered acceptable in terms of HTML semantics? ...

htmlsemantic-markup

What is the best way to change the active class using jquery?

Excuse me, can I get some help? I'm still learning html and jquery, and I've seen this question asked before, but none of the solutions seem to work for me. I'm trying to change the active class in my navbar when I click on another link. Wh ...

jqueryhtmlbootstrap-4

Spilling over into the adjacent DIV

<html> <head> <title>Pixafy</title> <style> html { background: url(wp.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgrou ...

csshtml

Struggling to position the newest messages at the bottom of the list

I'm working on creating a web chat system similar to IRC where the latest messages should always be at the bottom of the chat window. Below is my attempt, but unfortunately it's not working as expected: ...

htmlcsschat

What could be causing my jQuery $(this).next().removeAttribute to not function properly?

I am currently working on a file upload form that includes buttons like "Choose file", "Upload", and "Add other file". I am facing an issue where the "disabled" attribute is successfully removed from the first Upload button upon File Input change, but it ...

jqueryhtml

Choosing a checkbox by considering the checkbox value, especially in cases where the checkbox and its label are separate elements

My goal is to click on the checkbox located next to the label "Print Method 1". Take a look at how the element appears here Below is the HTML code for reference: <div class="texter"> <div class="checkbox"/> ...

htmlxpathcheckboxselenium-webdriver