Hide only medium-sized elements with Bootstrap 4

In my latest online project, I decided to integrate Bootstrap 4. The main focus is on mobile users, but I also want to ensure desktop users have a good experience.

However, I am facing difficulties in hiding certain texts on medium screens only using predefined classes. My current workaround is not ideal:

<span class="hidden-sm-up">Display: </span>

<span class="hidden-md-down">Display: </span>

I know this coding approach is not the best practice. I have been searching for the right combination of classes to hide content specifically on medium screens. Despite expecting a class like .hidden-md, it seems not to exist.

If anyone can provide guidance or assistance on this issue, it would be greatly appreciated.

Thank you,
knal

csstwitter-bootstrap

Answer №1

Hey everyone,

I was a bit let down because I couldn't find a straightforward solution, but I'm satisfied with the outcome after implementing the following code to meet my requirements:

@media only screen and (max-width: 992px) and (min-width: 576px){  
    .filters p span {  
        display: none;
    }  
}

After reading Brad's link, I was convinced that this was the way to go. Thanks for your help!

Take care,
Knal

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

The default page length for datatables cannot be applied at this time

I am having trouble with setting the pageLength for a table in this code. Can someone assist me with this issue? $(document).ready( function () { $('#Campaign_Overview').DataTable({ "pageLength": 5, "lengthMenu": [5, 10, 25, 50] }); ...

javascriptjqueryhtmlcssdatatables

jQuery loads browser cache to override transitions in the body class

My .load ajax function: 1) Click link 2) The requested page loads with a smooth css transition animation (applying/removing body classes) 3) If the page loads faster than 400ms, it should wait before revealing the page by removing the body class While ...

jquerycssajaxcachingcss-transitions

AngularJS v 1.3.17: ng-click not triggering within modal dialog

It seems like I may have overlooked something here. Here is the code snippet for a module: (function (app) { 'use strict'; app.controller('modalCtrl', modalCtrl); modalCtrl.$inject = ['$scope', '$modalI ...

javascriptjqueryangularjstwitter-bootstrap

What is the best way to show a block of text when hovering over an image with a smooth easing effect

How can I make a block of text appear with ease when hovering over an image of a tree? The current setup works, but the transition effect is not as smooth as I want it to be: HTML: <p id="hover-text1" class="hover-text1"> Accomplished! </p> & ...

javascripthtmljquerycsshover

"Exploring the concept of master pages in web development with the combination

Recently, I have been developing a website that functions similarly to olx, displaying ads based on the visitor's location (for example, showing Mumbai ads if the visitor is from Mumbai). Initially, I was planning to create separate pages for each cit ...

javascriptphphtmlcssmaster-pages

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Recently, I launched my new website and encountered a peculiar issue. Upon clicking on Pickup Date & Time, a bootstrap datepicker pops up like it should. However, the problem arises when viewing the website on mobile devices - the datepicker appears offsc ...

javascriptjquerycsstwitter-bootstrapbootstrap-datepicker

What is the best way to add an image within a div without affecting the layout of the subsequent div?

I have created an HTML form with 4 inputs and a text area using bootstrap. I am looking to add an image to the right of two divs without pushing one of them down. I want it to look like the first image attached, but currently, it looks like the second ima ...

jqueryhtmltwitter-bootstrap

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

toggle visibility of <li> elements using ng-repeat and conditional rendering

I have an array of color IDs and codes that I'm utilizing with ng-repeat in the <li> tag to showcase all colors. However, I only want to display colors where the color code is less than 10, hiding any colors where the color code exceeds 10. Addi ...

cssangularjs

Problem with triggering a fire event on a Bootstrap carousel slide

I'm having trouble getting this code to trigger an event when the carousel slides. Any ideas on how to make it work? const $carousel = $('#carousel-showcase'); $carousel.carousel(); $carousel.on('slide', function(e) { setTimeo ...

jquerytwitter-bootstrapcarouselslide

Improve loading speed of thumbnail and full images in HTML

I'm struggling with slow loading images on my blog website. Can anyone help me figure out how to improve loading speed and: Is it possible to use a separate thumbnail image that is smaller in size instead of the full image for both thumbnails and th ...

javascriptjqueryhtmlcssmysql

Is there a way to show a loading icon during the image change process without using jQuery?

How can I add a loading icon to an image change event without using jQuery? I'm new to the coding world and Stack Overflow community, so please bear with me. I've been searching for a solution to my specific situation but haven't been able ...

javascripthtmlcssimageloading

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

javascripthtmlcssblogger

Implementing color transitions in javascript

Everyone talks about transitioning things in CSS, but have you ever thought about transitioning background colors in JavaScript? I'm currently working on a function that changes the background color of a div with the id of ex1 to green. However, I&apo ...

javascripthtmlcss

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

Removing the border from a button in CSS and HTML

Looking to build a sleek and stunning website, but struggling with removing button borders. Any help would be greatly appreciated! If you'd like to check out the issue, visit this link: https://i.sstatic.net/daaec.jpg. I'm aiming for no button o ...

htmlcss

unrestricted motion through the utilization of css3 transitions and translations

When applying a new CSS translate, it's common practice to specify the exact number of pixels you want an element to move, such as 50px, 60px. This results in a relative movement from its current position. You can see an example of this here: http://j ...

csstransformtransition

Troubleshooting: Jquery show effects not functioning as expected

Currently, I am facing an issue where I am attempting to display a fixed div using the show function of jQuery. Although the show function itself is working properly, when I try to include an effect from jQuery UI, it does not seem to work as expected. Bot ...

javascriptjqueryhtmlcss

Positioning Firefox absolutely within a table-cell element is possible

Interestingly, it's not Internet Explorer causing me trouble this time, but Firefox. Here is the Fiddle link for reference: http://jsfiddle.net/EwUnt/ The purpose of this table is to highlight both the row and column of the cell where the cursor is ...

javascriptjqueryhtmlcssfirefox

Maximizing performance with internal Bootstrap?

An interesting concept to consider is that the fastest website could actually be an empty webpage. Each additional piece of data added compromises performance, yet it's the server's responsibility to send all the code to the client. When using ...

htmlcssperformancebootstrap-4