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

While attempting to use $scope.$apply() in Angular, I encountered a bug that

I have set up a specific example in a jsbin: http://jsbin.com/deqerelita/1/ Situation The concept is quite straightforward. You click a button, the controller adds to the model, and the view updates accordingly with a hidden input type="file". After the v ...

javascriptangularjs

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

Adding an icon to the Autocomplete TextField in MUI v5 in Reactjs: A step-by-step guide

I created an autocomplete feature with the code below and attempted to display an icon after selecting each item, but unfortunately, it didn't work as expected! import { useState } from 'react' import { TextField,InputAdornment ,Autocomplete ...

javascriptreactjsmaterial-uiautocomplete

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...

javascripttypescript

An error occurred with the authorization headers when attempting to retrieve the requested JSON

I am attempting to retrieve JSON data from the Bing Search API. Here is what I have implemented: <!DOCTYPE html> <html> <body> <p id="demo"></p> <script language="JavaScript" type="text/javascript" src="jquery-1.12.3.js"& ...

javascriptjqueryjson

Sending PHP output data to jQuery

Trying to implement this code snippet /* Popup for notifications */ $(document).ready(function() { var $dialog = $('<div></div>') .html('message to be displayed') .dialog({ ...

phpjavascriptjquery

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

Currently, I have encountered an issue with my NextJs project using Supabase Auth for authentication. I am currently utilizing the Discord provider and everything works fine initially. However, after a few minutes, the session object gets updated and the p ...

javascriptsessionnext.jsoauth-2.0supabase

Encountering the error `ReferenceError: document is not defined` when trying to deploy a Next.js project on Vercel

I recently worked on a Next JS project and deployed it to Vercel. Initially, everything was running smoothly, so I didn't check the website status for a while. I was just developing it locally and pushing updates to GitHub. However, when I finally rev ...

javascriptreactjsnext.jsreact-quill

PHP loaded HTML does not allow JavaScript to execute

My system includes an announcements feature where all announcements are retrieved from a database and displayed on the screen using Ajax and PHP. Below is the code snippet used to load each announcement onto the page: echo '<div id="announcements ...

javascriptphpjqueryhtmlajax

I'm having trouble locating the airtable module, even after I successfully ran npm install airtable

Currently attempting to integrate the airtable api into my website's backend using node.js. However, upon writing var Airtable = require('airtable'); and running the file with node [filepath], I encounter an error in the command prompt: ...

javascriptnode.jsnpm-installairtable

Steps for adding an npm dependency as a peer dependency:

Is there a way in npm to install dependencies as peer-dependencies similar to the yarn option --yarn, rather than manually adding them? For instance: "peerDependencies": { "@angular/core": "^7.0.0" } Update: Further clarifi ...

javascriptnode.jsnpmyarnpkg

Issue with Bootstrap Table Style When Using window.print();

The color of my Bootstrap table style is not displaying correctly in the print preview using window.print(). Here is a screenshot showing that the table style is not working properly: https://i.stack.imgur.com/eyxjl.jpg Below is the code I am using: < ...

javascriptphpprinting

What is the best way to incorporate a variable in the find() method to search for similar matches?

I've been working on a dictionary web application and now I'm in the process of developing a search engine. My goal is to allow users to enter part of a word and receive all similar matches. For instance, if they type "ava", they should get back ...

javascriptnode.jsexpressmongoose

What is the best way to prevent labels from floating to the top when in focus?

How can I prevent the label from floating on top when focusing on a date picker using Material UI? I have tried several methods but nothing seems to work. I attempted using InputLabelProps={{ shrink: false }} but it did not resolve the issue. Here is a li ...

javascriptreactjsmaterial-uidatepickermaterial-design

Creating an HTML element within a three.js globe

I have a globe created using three.js Reference: I am trying to display an HTML div at a specific latitude/longitude on the globe. Can someone guide me on how to position the div at a particular lat/long? What I've attempted: I'm currently stu ...

javascriptthree.js

Is it possible for Response.Redirect and OnBeforeUnload to cooperate effectively?

Is there a way to detect if the server-side code has sent a Response.Redirect in an OnBeforeUnload event? I need to alert the user before they navigate away from a page, but I don't want the prompt to appear when the server redirects. I'm dealin ...

javascriptasp.netajaxdom-eventsasp.net-ajax

Tips for avoiding unintended single clicks while double clicking in React

How can I make a function trigger on both single click and double click events when working with a video element in React? Currently, the single click function is also being called when double clicking. I am seeking a solution to this issue. Below is the ...

javascriptreactjsnext.jsonclick

How to easily transfer a JSON file to a server using Vue and Node.js

As a newcomer to the world of Node.js and Vue development, my goal is to establish a seamless process for users to create and upload a JSON file to the server when they save data in a form. This process should occur effortlessly in the background, allowing ...

javascriptnode.jsvue.js

When using this.$refs in Vue, be mindful that the object may be undefined

After switching to TypeScript, I encountered errors in some of my code related to: Object is possibly 'undefined' The version of TypeScript being used is 3.2.1 Below is the problematic code snippet: this.$refs[`stud-copy-${index}`][0].innerHTM ...

javascripttypescriptvue.js

What could be causing the Universal Code for Disqus to not function properly?

Struggling to get this code to work on my website. I've tried everything, from clearing caches and cookies to disabling plugins and extensions, but still no luck. Check out the code below: import React, { Component } from 'react' import { ...

javascriptreduxreactjsdisqus