Currently, I am experimenting with Bootstrap to display h1 only on desktop/large screens and h2 only on mobile devices. However, despite my efforts, both h1 and h2 appear on all screen sizes.
The h1 and h2 elements are input fields and the condition for their display depends on whether they are filled or not.
if(h1 != null){
<h1 class="d-none d-lg-block d-xl-none"> Test 1</h1>
}
else{
<h2 class = "d-block d-sm-none"> Test 2 </h2>
}
You can achieve the desired result without using a conditional statement by utilizing Bootstrap's display properties.
In your markup, you only need to include the . if you are specifying the class in CSS or JS externally.
To display a specific element over 1140px (desktop), use d-xl-block on h1. For elements like h2, which should not show when h1 is displayed, apply d-xl-none.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285c465e465a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<h1 class="d-none d-xl-block">Test 1</h1>
<h2 class="d-block d-xl-none">Test 2</h2>Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...
Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...
Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...
I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...
Issue My current code features a <button> that, upon a single click, updates the class of a <div> element to "fade-in" and inserts it into the DOM. This action causes the <div> to visually fade in once it's in the DOM. However, if I ...
Hey there! I have a total of 7 sections in my layout. The first 4 sections are all CMYK, while the last 3 are RGB. My current challenge is trying to prevent scroll snapping on the RGB sections. The issue arises when I apply scroll-snap-align: start; to t ...
VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...
There are times when I have to retrieve elements in the following ways: var object = document.getElementById('ObjectName'); Other times, it's done like this: var object = document.getElementById('#ObjectName'); What distinguishes ...
I am trying to figure out how to save an HTML file as a .msg format in order to send it later. The HTML is basically a mock of a regular email with just the basic features like from, to, cc, subject, and body. I'm not quite sure how to go about achiev ...
I am facing an issue with a bootstrap dropdown that remains open even after the screen is resized to hide the dropdown button. I have searched for a solution, but none of the answers I found have helped me so far. Is there a way to close the dropdown or r ...
In my code, I have a feature that alters the text displayed on a button depending on certain conditions. $scope.text = 'Wait'; if(Number($scope.x) == Number($scope.y)) $scope.text = 'Go' else if(Number($scope.x) < Number($scope ...
Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...
var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...
I have been working with Bootstrap 4 and discovered that it no longer supports Internet Explorer 8. This could pose an issue, so I am wondering if there is a way to display a different website specifically for Internet Explorer 8, or if there are ways to ...
Hello everyone! I have successfully created my own jQuery/JavaScript auto complete search suggestions div. I have implemented a feature where it pulls in an XML dictionary full of words and uses regular expressions to suggest matches based on user input. H ...
I am struggling to display nested json data in a PrimeNG table. When I retrieve the data using an HTTP service, it appears as [object][object] when displayed directly in the table. What I want is to show the nested json data with keys and values separated ...
After following the steps outlined by Keenan Payne, I successfully created a modal window using HTML5 and CSS3. However, I am now seeking assistance with setting it up to close when users click on the darkened background outside of the modal window. Can an ...
Is there a way to make SVG lines appear on top of CSS-styled elements in my HTML file? I have a white background SVG created with JavaScript using d3, and I am adding CSS-styled rectangles on top of it. However, I also want SVG lines (created with JavaScri ...
As I dive into the world of CSS, I encountered an issue while working on my webpage. The problem lies in a space that appears on my displayed webpage. .grouping:before, .grouping:after { content: " "; display: table; } .grouping:after { clear: bo ...
Is there a way to make a link in a table cell wrap and respect the column width I provide? When data in a table cell is a link, it doesn't seem to let me specify the column width. How can this be achieved? <link href="https://cdn.jsdelivr.net/np ...