Display a div when collapsing in Bootstrap for screen widths of 991px or smaller

I am currently working on optimizing the mobile version of my website using Bootstrap. There is a div element that is taking up too much space on the page, and I would like to hide it on page load for screen widths of 991px or less. I want users to have the option to show this div by clicking on a button. For screen widths greater than 992px, I want the div to be visible upon page load.

My question is if Bootstrap provides a way to achieve this without relying on additional JavaScript. If so, I would like to know how to implement it. Otherwise, what would be the best approach to accomplish my goal?

<div class="mydiv">
    This content should be hidden on page load for screen widths of 991px or less.
</div>
<a class="btn" data-toggle="collapse" data-target=".mydiv">Show Div &raquo;</a>
javascripthtmlcsstwitter-bootstrapmobile

Answer №1

Styling with CSS

// Hide for screens below 992px
.mydiv {
   display: none;
}

@media (min-width: 992px) {

// Show for screens larger than 992px
    .mydiv {
        display: block;
    }
}

You can also utilize the bootstrap toggle to switch it on and off. If you need to hide the button on screens larger than 992px

@media (min-width: 992px) {
    #idforyourbutton {
        display: none;
    }
}

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 prototype object of the Datatable request parameter is missing

When attempting to make a datatable ajax request, I encountered an unexpected result on the server side. The console is logging the data as shown below: [Object: null prototype] { draw: '1', 'columns[0][data]': 'no', &ap ...

javascriptajaxdatatable

Trigger the script upon clicking the Save button within the AdminBro Edit page

AdminBro's documentation mentions that they provide predefined actions Edit (record action) - update records in a resource They also offer a hook called after. I created a function and assigned it to MyResource.edit.after. However, the issue is tha ...

javascriptexpresshookadmin-bro

Using jq and node.js to translate AWS EC2 tags

Seeking assistance with transforming this array of EC2 tags using jq and node.js: [ { Key: 'Name', Value: 'xxx' }, { Key: 'role', Value: 'yyy' } ] I want to transform it to: { name : 'xxx', ro ...

javascriptnode.jsjsonjq

Encountering a login issue with the jsonwebtoken code, specifically getting the error message "something went wrong logging in TypeError: Cannot read properties of undefined (reading 'sign')."

I encountered an error in my console saying, "something went wrong logging in TypeError: Cannot read properties of undefined (reading 'sign')." I am seeking assistance in resolving this issue. Below is the code snippet: import { mAdmin } from &q ...

javascriptnext.jsjwthasura

Enhancing Vue Filtered Lists for Increased Dynamism

Currently, I am iterating through a list of items using the v-for directive. Before displaying the list, I apply a filter based on a specific value using the .filter() method. To switch between different filtered values, I utilize the v-on:click event. How ...

javascriptarraysvue.jsvuex

Waves emanating from the heart of rings

I'm experimenting with creating a ripple effect using Anime.js on an array of dots forming circles. Despite trying various methods, I can't seem to achieve the desired result. Does anyone have any suggestions on how I can make it work? Here&apos ...

javascriptanimationanime.js

Ways to conceal <td>s in angularjs on specific rows during ng-repeat

In the first <tr>, I have a table with many <td> elements that I am populating using ng-repeat. <tr ng-repeat="receipt in $data"> <td data-title="voucher number"> <span>{{receipt.voucher_no}}</span> </td ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

What is the best way to utilize vanilla JavaScript in order to invoke Bootstrap5 modals?

there is a button <button onclick="showModal('@Url.Action("EditUserProfile","Profile",null,Context.Request.Scheme)','ویرایش پروفایل کاربر');" class=" ...

javascripthtmlbootstrap-5

Exploring the world of MVC4: Enhancing user experience with client-side

Solution: The answer provided by @www.innovacall.com is correct, I initially misunderstood it but now it works perfectly. Thank you for the help. Initial issue: I have been struggling with finding a solution to my problem. In my project, there is a mod ...

javascriptjqueryajaxasp.net-mvc-4twitter-bootstrap

What is preventing me from navigating to other pages in my React application?

Recently, I have been experimenting with ReactJS and encountered an issue where I couldn't access my other pages. The code snippet provided below seems to be the root of the problem. I am in the process of developing a multi-page application using Re ...

javascriptreactjs

Display additional fields based on a condition in ASP.NET Core 6.0 MVC for a Yes/No input

If a user enters either Yes or No in a specific field, I want to display additional fields that need to be filled based on their choice. <div class="col-6"> <label for="Renda Bruta">Demonstrativo do Ano</label> ...

c#htmlasp.net-corerazor-pages

Generate a base64 encoded string from a file and send it as a response using an ASP.NET httpHandler after receiving an AJAX request

Looking for a way to download various file types using AJAX. I came up with the idea of sending get requests with the file name as a query string via AJAX, receiving the response as a base64 string, and then converting it into a blob object to be download ...

javascriptasp.netajaxvb.nethttphandler

Utilize Browserify to Dynamically Load all Files within a Directory

As a newcomer to Browserify and JavaScript build systems in general, I find myself in a state of utter confusion. I have successfully set up Gulp for my builds, but recently I have been exploring Browserify to bundle my code, mainly to organize my code in ...

javascriptnpmgulpbrowserify

Finding the main directory in JavaScript: a step-by-step guide

My website uses mod_rewrite to reformat the URLs like this: The issue arises when making AJAX calls to a file: I want to access login.php from the root without specifying the full URL or using the "../" method due to varying folder levels. So, I need a ...

javascriptjqueryhtml

Reading JavaScript files using the HTML 5 File Reader

Currently, I am working on a feature that allows users to drag and drop a folder containing JavaScript files into an HTML5 page. Here is the code snippet for my implementation: $scope.files = []; //Establish dropzone var dropbox; dropbox = document.getEle ...

javascriptangularjshtmlfilereader

Encountering difficulties with image processing on a web page

Recently, I've been experimenting with uploading an image and converting it to a grayscale version on my webpage. Oddly enough, the javascript code works perfectly when tested locally but fails to generate the grayscale image once integrated onto the ...

javascripthtmlimage-processing

Populating a Listview in jqueryMobile with dynamic elements

I am struggling with my listview. Whenever I try to add or remove items from the list, the jquery mobile styling does not get applied to the new content that is added. <ul data-role="listview" id="contributionList"> <li id="l1"><a>5. ...

javascripthtmljquery-mobile

What is the best way to fulfill a promise after a CSV file has finished being read?

I have been utilizing the 'fast-csv' module that can be found at this link (https://www.npmjs.org/package/fast-csv), but I am open to switching to a different one. I attempted promised-csv (https://www.npmjs.org/package/promised-csv) but I had tr ...

javascriptnode.jscsvpromise

To effectively store the input values from eight labels into an array and subsequently identify the prime numbers within the array using JavaScript, follow these step-by-step instructions

As a newcomer to JavaScript, I am trying to extract the values of 8 labels (text) and store them in an array of 8 numbers. My goal is to then identify the prime numbers within this array. While I have been able to create the array and display the labels in ...

javascriptarrays

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss