Hide bootstrap card on smaller screens such as sm and md

Utilizing the Bootstrap 4.1 card component, I showcase categories within the right sidebar - check out a sample image of the card here: Card example image;

When viewing on smaller screens, it's preferable to collapse this large card as shown in this mobile example: mobile example.

How can I achieve this collapsing effect on `sm` and `md` screens while keeping the card intact on `lg` screens? Or should I opt for an alternative approach?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="card mb-3">
    <h5 class="card-header">Categories</h5>
    <div class="card-body">
      <h5><a href="http://rtss2.loc/info">All</a></h5>
      Categories here
    </div>
  </div>
</div>

javascriptjquerycsstwitter-bootstrapbootstrap-4

Answer №1

<button class="btn d-lg-none" type="button" data-toggle="collapse" data-target="#example-collapse">
    <span class="navbar-light"><span class="navbar-toggler-icon"></span></span>
</button>

<div id="example-collapse" class="collapse d-lg-block">
    <!-- your card content here -->
</div>

The class d-lg-none hides the button on larger screen sizes (lg and xl), while the class d-lg-block shows the div on such screen sizes. The collapse icon is styled for a navbar with the navbar-light style, so you may want to customize it to suit your own navbar design.

Answer №2

Using the pre-built Bootstrap classes can easily hide elements on smaller screens. See here for more information

This code snippet demonstrates how to achieve this effect:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container d-none d-lg-block">
  <div class="card mb-3">
    <h5 class="card-header">Categories</h5>
    <div class="card-body">
      <h5><a href="http://rtss2.loc/info">All</a></h5>
      Categories will go here
    </div>
  </div>
</div>

This method uses media queries to determine the screen width and applies display:none if the threshold is not met.

Answer №3

If you want to achieve the desired result, consider setting it up in this manner :

<div class="card">
   <div class="card-header">
     <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
        card header
     </a>
   </div>
   <div id="test-block" class="collapse">
    <div class="card-block">
        card block
    </div>
  </div>
</div>

This setup should accomplish what you are aiming for.

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

Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

In my Next.js project connected to Apollo, I have around 50 static URLs fetching data using getStaticProps(). The performance is great, and I enjoy how the pages load. However, a problem arises when Vercel builds the static versions of these pages during d ...

javascriptnext.jsapollovercel

Decode a date and fetch it in the desired format within the ajax success function

Hey there, I've encountered an issue in retrieving the date value in ajax success. Can someone guide me on how to fix this problem? $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", data: {}, ...

c#jqueryjsondateasp.net-ajax

Unable to submit form in Nextjs using react-bootstrap

Instructions To create a registration form, follow these steps: Fill out the form on the register page and then click submit. The react-bootstrap button will trigger the handleSubmit() function using onSubmit={}. Expected vs Actual Outcome I attempted va ...

javascriptnode.jsreactjsnext.jsreact-bootstrap

Utilizing the fetch() method in Vuex to obtain a restful API

Struggling to integrate my API data through Vuex, I am in dire need of a reliable guide or perhaps someone who can assist me with this task. Previously, without using Vuex, all my requests functioned flawlessly. However, now I'm unsure about the neces ...

javascriptvue.jsvuex

Trigger the animation of a Div element when the cursor hovers over a different Div

I am interested in creating an animation where one div moves when the mouse hovers over another div elsewhere on the page. Here is an example... CSS #blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-c ...

jquerycsshoverjquery-animate

Cross-Origin Resource Sharing Problem - Angular version 8 with NodeJS and ExpressJS

I've attempted various solutions from different sources and have a feeling that I may be overlooking something minor here. In my setup, I have an AngularJS 8 application running on Node 10 with ExpressJS. The specific issue I'm encountering rela ...

javascriptnode.jsangularexpresscors

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

javascriptjqueryhtmlcssajax

Encountering an issue with a Discord bot causing it to malfunction and deviate from its intended

Initially, everything appears to be functioning properly with the bot. When I execute the ?listen command, it responds correctly with bot is collecting messages now.... However, the ?stop command does not seem to have any effect. Furthermore, when I try th ...

javascriptnode.jsdiscord.js

Should we avoid using 'RedirectToAction' with AJAX POST requests in ASP.NET?

As a newcomer to jQuery, Json, and Ajax, I am putting in the effort to grasp the concepts clearly, but I am facing some difficulties. I have an ajax POST Delete method that is currently functional, however, my professor has suggested that I refactor the c ...

javascriptjqueryajaxasp.net-mvc

The functionality of Bootstrap 4 tabs is not compatible with owl carousel 2

Attempting to integrate bootstrap tabs functionality into the owl carousel 2, but encountering issues. On the first click of any menu item, it functions correctly and displays the corresponding value. However, upon clicking for a second time, it becomes s ...

tabsbootstrap-4owl-carouselbootstrap-tabs

Is it appropriate to refer to a single page application as a web 3.0 application?

As time progresses, we are witnessing the rise of more and more single page applications or frameworks such as new twitter and Sammy. It appears to be a significant advancement where we move away from generating code on the server side, with servers actin ...

javascriptjqueryajaxhtmlsinglepage

Is there a way to activate a function in one component from another within a Next.js application?

As mentioned in the title, I am working with 2 custom components within a basic NextJS application: <section> <CompA></CompA> <CompB></CompB> </section> I am trying to figure out how to have a button inside Comp ...

javascriptreactjsnext.js

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

javascripthtmlsafari

Changing innerHTML in CoffeeScript

Are there other options instead of using the 'innerHTML' property in CoffeeScript? In JavaScript, you typically write something like this: document.getElementById('element').innerHTML = "blah_blah" Is there a different approach to ac ...

javascriptcoffeescript

Is there a way to reset a state without needing to declare an initialState beforehand?

I'm facing a situation where I need to reset a state without having to create an initial state again. Here's the dilemma: initialState: { id: '', name: '', index: '' }, state: { ...

javascriptvue.js

Installing different versions of a package in npm can be done by loading multiple versions

I am in the process of setting up a web API and I want to provide support for various versions of the underlying library. In essence, I would like to access it through: where x.y.z represents the version of the library I am utilizing. Using npm for mana ...

javascriptwebservicenpmversions

transforming JSON into CSV structure

I am attempting to utilize a JSON file as input data. Below is an excerpt of sample data. [ { id: 1671349531, name: "A Wild Restaurant Expansion", blurb: "We are looking to expand from our current location to a new and better facility...", goal: 17000, pl ...

javascriptjsonrcsv

Leveraging random attributes in Next.js without encountering the "server/client mismatch" issue

Is there a way to generate unique IDs for form inputs dynamically, in order to avoid conflicts with other elements that share the same ID? If multiple login forms are present on a single page, each with an 'email' field, setting the id property b ...

javascriptreactjsnext.js

Implementing a sorting mechanism for ajax data retrieval

Currently, I am using the code below to save HTML created with jQuery in a database and retrieve it later: $('div[read]').each(function(){ var kelas = $(this).attr('kelas'); $.post('admin.php',{kelas:kelas,id:id},func ...

jqueryhtmlajaxeach

Speed of scrolling on a biquadratic Bezier curve

I recently came across a fascinating website called that showcases a unique scrolling behavior. It gives the illusion of moving between slides (screens) with snappy scrolling, when in reality, the website actually scrolls continuously. The transitions bet ...

javascriptmathscrollmagic